小程序rich-text替换字符串

示例1：

Str = "123  4556 66666\n\n\n";
var Str1 = new RegExp('\n', 'g');
Str = Str1.replace(reg1, '');
console.log('替换换行符:'+ Str);
Str = Str.replace(/\s+/g, '');
console.log("去掉空格: " + Str);

示例2：

wx.request({
      url: that.data.testwebsite+"/shichang/detail.asp",
      data: {id:getid},
      success: res => {
        let result = res.data[0]
        let contents = result.Content;
        // console.log(typeof contents)
        let newcontents = contents.replace(/\<img/gi, '<img style="width:100%;height:auto"')
        // console.log(newcontents);
        if (res.statusCode === 200) {
          that.setData({
            jobcontent: newcontents
          });
        }       
      },
    });

示例3：

定义/utils/wxs.wxs文件：

var replacestr=function(str){
  var newdate = str.replace(getRegExp('src="/UploadFile','g'),'src="https://www.mydesignplus.cn/UploadFile');
  return newdate;
}

module.exports = {
  replacestr: replacestr,
};

示例4：小程序点击 rich-text 组件之后预览富文本中的图片

在小程序开发时，常常会碰见一种需求，就是当用户点击 rich-text 中渲染的富文本时，需要预览图片，这里提供一个思路，就是通过正则匹配 HTML 中的图片链接，然后存到一个数组中，再将数组放入 wx.previewImage 中进行显示。

  // 点击卡片之后会预览图片
  onTapImg(e: WechatMiniprogram.BaseEvent) {
    // 将图片里的 src 提取出来，变成一个数组。
    const imgTags = e.currentTarget.dataset.key.match(/<img.*?>/g);
    const urls: string[] = [];
    if (imgTags) {
      imgTags.forEach((tag: string) => {
        const url = tag.match(/src="(.*?)"/);
        if (url) {
          urls.push(url[1]);
        }
      });
    }

    wx.previewImage({
      urls: urls,
    });
  },

示例5：定义替换函数

方式一：在style中追加 max-width:100%;height:auto; ，此方法优点灵活，对于content中所有图片都起作用

// 文章html正则追加max-width
contentConv(content) {
    return content.replace(/<(img).*?(\/>|<\/img>)/g, function(mats) {
    if (mats.indexOf('style') < 0) {
        return mats.replace(/<\s*img/, '<img style="max-width:100%;height:auto;"');
    }else{
        return mats.replace(/style=("|')/, 'style=$1max-width:100%;height:auto;')
    }
    });
},

方式二：此方法会破坏图片设置的样式，再设置style="max-width:100%;height:auto;"
contentConv(content) {
    return content.replace(/<img[^>]*>/gi, function (match, capture) {
      return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 'style="max-width:100%;height:auto;"') // 替换style
    });
}

示例6：

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" 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;      
}

3.匹配https/http/www开头网址

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