关于微信小程序wxs文件中正则替换这件事

一、问题描述

事件起因：要把字符串中的 @昵称 变蓝， 但是昵称中存在特殊符号(比如：空格、@、[、$ 等)，此时使用正则匹配处理会报错，错误如图：

本想着如此就把特殊符号前加上\ 吧，那不就解决了，想法很美好，但偏偏wxs就是不让，它会把 \ 自动给你替换成 \x5c ，依然报错，错误如图：

所以没办法省事的在wxs中统一处理了，只能在页面js中加反斜杠后传入wxs中再处理，/(ㄒoㄒ)/~~

二、代码

JSON数据结构如下图
对显示文字做处理( 该变蓝的文字使用<span class="blue">@变蓝昵称</span>包上 )
通过正则比对 friend_list 中有的昵称，content 中才会变蓝

1. 先写了个公共函数处理昵称数组

// @昵称中的特殊字符-转义处理
export const jsRreplaceStr = (friendList=[])=>{
	if(!friendList) return;	
	for(var i=0; i<friendList.length; i++){
		var nickname = friendList[i].nickname;
		var pattern = new RegExp('[\\[\\]\\^\\$\\|\\(\\)\\+\\*\\?\\.]','g');
		if(nickname.match(pattern)){
			nickname = nickname.replace(pattern,function(match,param,offset,string){
				var html = "\\" + match;
				return html;
			})
		}
		friendList[i].nickname = nickname;
	} 
	return friendList
}

2. 在页面中再次比对后变蓝

<rich-text :nodes="uFunc.replaceStrNew(item.comment_content, item.friend_list)"></rich-text>
<!--引入wxs-->
<script module="uFunc" lang="wxs" src="@/utils/wxs/common.wxs"></script>

/*
 * common.wxs
 * 评论中 @昵称 蓝色高亮显示
 * @param {String} str   需要过滤替换的字符串
 * @param {String} name  评论人昵称
 * @param {Array} friendList  @昵称列表
 */
function replaceStrNew(str, friendList=[], name=''){
    var strnew = str ;
	var strname = !name ?  '':'<span class="bold">' + name + ': </span>';

	
	for(var i=0; i<friendList.length; i++){
		var nickname = friendList[i].nickname;
		
		var regStr = '@' + nickname + '\s';
		var reg = getRegExp(regStr, 'g');
		if(strnew.match(reg)){
			console.log('ss', strnew.match(reg))
			strnew = strnew.replace(reg, function(match,param,offset,string){
				var html = "<span style='color:#41AEF5'>" + match +"</span>";
				return html;
			})
		}
	}
	return strname + strnew;      
}

二、匹配https/http/www开头网址

var reg = getRegExp('(http|https):\/\/[\w]+(.[\w]+)([\w\-\.,@?^=%&:/~\+#\u4e00-\u9fa5]*[\w\-\@?^=%&/~\+#])', 'g');