VUE 聊天文本中的http及https链接实现可点击处理

项目需求，做一个聊天的软件，其中有个需求要识别聊天文本中的链接地址，并支持点击。

实现方法如下：

1.写一个函数接收文本内容，解析出其中的链接部分，并生成链接标签。

2.直接使用v-html展示解析完的标签内容。

上代码段：

<div class="text-box" :key="index2" v-html="linkUrl(item2.text)"></div>

解析函数linkUrl：

/**
 * 解析聊天列表中的超链接
 * 生成超文本标签
 * @param {String} str 文本
 */
analysisUrl(str){
    if(!str){
        console.log("test---analysisUrl-str is null");
        return;
    }
    //先计算里面有多少个需要替换的链接
    var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
    var htmlStr = str.replace(reg , `<a target=_blank href="$1$2"> $1$2 </a>` );
    return htmlStr;
},

大功告成，当然还有很多问题，带了http://但是后面的路径并不完整(也就是说错误的超链接文本)这里会把他当成一个正确的地址，还有不带http://或https://的(例如www.baidu.com),就认不出来了，这些后期优化吧。