各位大佬，帮我看一下js正则反向引用的问题(微信小程序内)

Question

描述：后台给出一长串字符串，里面包括文本和链接，目前我需要做的就是将串解析成下面预期结果那样的一个数组，但是在正则引用那里出现了问题，假设原串中有三个链接，当前我自己的解析方法会造成最后一个覆盖前面两个链接的问题，不是预期的结果，麻烦各位大神有好的办法可以交流或者指导一下，谢谢

微信小程序内不支持直接操作dom

//原串
var desc = '出于HTTPS的安全策略，浏览器会阻断HTTPS上的非安全请求（HTTP）请求，但是我们可以使用被动混合内容的方式来跨越这个安全策略' +
    '<a href="web://http://api.520.com:8891/clientpage/money.php">去看看怎么请求</a>' +
    '这时候，浏览器只会在控制台报warning，而不会block我们的请求。<a href="web://http://api.520.com:8891/activity/convention.php">查看规则</a>。' +
    '因为攻击者可以通过不安全的HTTP内容来攻击安全的HTTPS页面<a href="in://goplay">去交互</a>';
    
    


//目标串,类似这样，需要将原串里面的多个a链接处理成规定形式，并保持原串的各位置不变
/*
* '出于HTTPS的安全策略，浏览器会阻断HTTPS上的非安全请求（HTTP）请求，但是我们可以使用被动混合内容的方式来跨越这个安全策略' +
    '<a href="https://api.520.com/clientpage/money.php?url=xxx&title=xxx">去看看怎么请求</a>' +
    '这时候，浏览器只会在控制台报warning，而不会block我们的请求。<a href="https://api.520.com/activity/convention.php?url=xxx&title=xxx">查看规则</a>。' +
    '因为攻击者可以通过不安全的HTTP内容来攻击安全的HTTPS页面<a href="/pages/goplay/goplay">去绑定</a>'
*
* */


//预期结果
[
    {
        'MsgType'   : 'text',
        'MsgContent': '出于HTTPS的安全策略，浏览器会阻断HTTPS上的非安全请求（HTTP）请求，但是我们可以使用被动混合内容的方式来跨越这个安全策略'
    },
    {
        'MsgType'   : 'navigator',
        'MsgContent': 'https://api.520.com/clientpage/money.php?url=xxx&title=xxx',
        'MsgParam':'去看看怎么请求',
    },
    {
        'MsgType'   : 'text',
        'MsgContent': '这时候，浏览器只会在控制台报warning，而不会block我们的请求。'
    },
    {
        'MsgType'   : 'navigator',
        'MsgContent': 'https://api.520.com/activity/convention.php?url=xxx&title=xxx',
        'MsgParam':'查看规则',
    },
    {
        'MsgType'   : 'text',
        'MsgContent': '因为攻击者可以通过不安全的HTTP内容来攻击安全的HTTPS页面'
    },
    {
        'MsgType'   : 'navigator',
        'MsgContent': '/pages/goplay/goplay',
        'MsgParam':'去交互',
    },
]


var MsgBody = [];

var MsgContent = null,MsgType = null;

var tmsg = '', amsg, restMsgIndex = null
var expr = /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/mg
amsg = desc.match(expr); //匹配是否存在a链接

console.log(amsg)
if (!amsg || amsg.length < 1) {
    MsgType = 'text';
    MsgContent = desc;
    MsgBody.push({
        'MsgType'   : MsgType,
        'MsgContent': MsgContent
    })
}
else  //存在a链接的情况
{

    var len = amsg.length; //a链接的个数
    console.log(len)
    for (var i = 0; i < len; i++) {
        tmsg = desc.substring(0, desc.indexOf(amsg[i])); //最前面的文字

        if (tmsg) {  //以文本开头
            MsgType = 'text';
            MsgContent = tmsg;
            MsgBody.push({
                'MsgType'   : MsgType,
                'MsgContent': MsgContent
            })
        }

        var pattern1 = new RegExp("in://", "ig");//以,分割   in://mytrends

        var pattern2 = new RegExp("web://", "ig");//以,分割  web://http://api.yuepao520.cn:8009/clientpage/friend_raiders.php

        var url = amsg[i];

        var param = '' ,src='';

        MsgType = 'navigator';

        /*
            <a\b               #匹配a标签的开始
            [^>]+              #匹配a标签中href之前的内容
           \bhref="([^"]*)"    #匹配href的值，并将匹配内容捕获到分组1当中
             [^>]*>            #匹配a标签中href之后的内容
            ([\s\S]*?)         #匹配a标签的value，并捕获到分组2当中，?表示懒惰匹配
            </a>               #匹配a标签的结束
        */

        new RegExp('<a\b[^>]+\bhref="([^"]*)"[^>]*>([\s\S]*?)</a>', "ig");  //这里reg有缓存，导致了后面覆盖前面的

        var link = RegExp.$1; //这里是a链接href的内容

        var alt = RegExp.$2;//这里是a链接可点击文字的内容

        console.log(url,link,alt)
        
        
        //解析两种预定义的a链接，解析成可识别链接
        if(pattern1.test(url)) //in开头类型的  <a href="in://goplay">
        {
            switch (true) {
                case new RegExp("goplay", "ig").test(link):
                    src = app.globalData.navigateTo.goPlay;
                    break;
                case new RegExp("userinfo", "ig").test(link):
                    var temp = (link).split('?');
                    src = app.globalData.navigateTo.getUserInfo+'?'+temp[1];
                    break;
                case new RegExp("setmyinfo", "ig").test(link):
                    src = app.globalData.navigateTo.setUserInfo;
                    break;
                case new RegExp("setting", "ig").test(url):

                    break;
                case new RegExp("mytrends", "ig").test(url):

                    break;
                case new RegExp("myphoto", "ig").test(url):

                    break;
                case new RegExp("visitorrecord", "ig").test(url):

                    break;
                case new RegExp("feedback", "ig").test(url):
                    src = app.globalData.navigateTo.feedBack;
                    break;
                case new RegExp("vip_pay", "ig").test(url):
                    src = app.globalData.navigateTo.vipRecharge;
                    break;
                case new RegExp("money_pay", "ig").test(url):
                    src = app.globalData.navigateTo.goldRecharge;
                    break;
                case new RegExp("payment", "ig").test(url):
                    src = app.globalData.navigateTo.goldRecharge;
                    break;
            }


        }
        else if(pattern2.test(url))//web开头类型的  <a href="web://http://api.520.com:8891/activity/convention.php">
        {
            src = (link).split('//');  //替换成https，替换掉端口
            if(src[1].indexOf("https") == -1){
                param = src[1].replace(/http/,'https')+'//'+src[2];
                param = param.replace(/:8891/,'')
            } else {
                param = src[1]+'//'+src[2]
            }
            //这种直接使用H5页面
            //src = app.globalData.navigateTo.clientPage+'?url='+param+'&title='+alt
            src = '测试'+'?url='+param+'&title='+alt
        }


        MsgContent = amsg[i];

        MsgBody.push({
            'MsgType'   : MsgType,
            'MsgContent': src,
            'MsgParam':alt,
        })


        restMsgIndex = desc.indexOf(amsg[i]) + amsg[i].length;

        desc = desc.substring(restMsgIndex);

    }

    if(desc){  //最后还存在文本
        MsgType = 'text';
        MsgBody.push({
            'MsgType'   : MsgType,
            'MsgContent': desc
        })
    }
}

Answer 1

//原串
var desc = '出于HTTPS的安全策略，浏览器会阻断HTTPS上的非安全请求（HTTP）请求，但是我们可以使用被动混合内容的方式来跨越这个安全策略' +
    '<a href="web://http://api.520.com:8891/clientpage/money.php">去看看怎么请求</a>' +
    '这时候，浏览器只会在控制台报warning，而不会block我们的请求。<a href="web://http://api.520.com:8891/activity/convention.php">查看规则</a>。' +
    '因为攻击者可以通过不安全的HTTP内容来攻击安全的HTTPS页面<a href="in://goplay">去交互</a>';

var MsgBody = [];
var expr = /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/mg // 尽量不使用构造器函数
let result
let lastIndex = 0
while (result = expr.exec(desc)) { // 使用exec方法，match方法在全局模式下不会保存分组的内容，求分组内容的时候还需要再次匹配
    let index = result.index
    let src = result[1]
    let alt = result[2]
    if (lastIndex !== index) {
        MsgBody.push({
            'MsgType'   : 'text',
            'MsgContent': desc.slice(lastIndex, index)
        })
    }
    /**
     * src的处理逻辑，这里我就不写了
     * ...
     */
    MsgBody.push({
        'MsgType'   : 'navigator',
        'MsgContent': src,
        'MsgParam'  : alt
    })
    lastIndex = index + result[0].length
}
if (lastIndex !== desc.length) {
    MsgBody.push({
        'MsgType'   : 'text',
        'MsgContent': desc.slice(lastIndex)
    })
}

Answer 2

题主改了问题。纯解决请看luckness的回答。

---

？有特别的需求一定要自己造DOMParser的轮子吗？让原生代码去做这件事不是又快又没bug？

const raw = '出于HTTPS的安全策略，浏览器会阻断HTTPS上的非安全请求（HTTP）请求，但是我们可以使用被动混合内容的方式来跨越这个安全策略<a href="web://http://api.520.com:8891/clientpage/money.php">去看看怎么请求</a>这时候，浏览器只会在控制台报warning，而不会block我们的请求。<a href="web://http://api.520.com:8891/activity/convention.php">查看规则</a>。因为攻击者可以通过不安全的HTTP内容来攻击安全的HTTPS页面<a href="in://goplay">去交互</a>';

const tree = (new DOMParser()).parseFromString(raw, 'text/html').body;

const ret = Array.prototype.map.call(tree.childNodes, ({nodeName, textContent, href}) => {
  switch(nodeName) {
    case '#text':
      return { MsgType: 'text', MsgContent: textContent };
    case 'A':
      // whatever you want
      return { MsgType: 'navigator', MsgContent: null, MsgParam: textContent };
  }
});

Answer 3

参见MDN，DOMParser
https://developer.mozilla.org...