小程序rich-text使用

今天在做小程序一个搜索页面，对输入的内容匹配到相应的地点，并且要高亮搜索内容

就上面这种，看到这个想了一下，这个简单

思路就是：拿到着总字符串和查询字符串，然后根据查询字符串把文案切出来，再根据字符串索引判断将查询字符串插入到数组对应位置中，最后遍历数组展示，当与查询字符串相同时加上高亮class 

看着没啥问题，实现起来还是挺复杂的，然后也觉得很low，一直处理字符串，正觉得苦恼不想写就问了旁边ios原生怎么实现，原生伙伴说他们有富文本，然后索引定位，实现起来很简单，但是我没用过，想着前端好像没这个，然后扫了一下小程序文档，发现了一个rich-text就是富文本，瞬间就兴奋了

修改思路为：直接用正则对总字符串全局替换查询字符串，并替换的内容为一个加了高亮class的元素

实现过程：建一个wxs文件，代码如下

var filterTxt = function (totalStr, choosedStr) {

if(typeof totalStr == 'string' && typeof choosedStr == 'string' && totalStr && choosedStr) {

var reg = getRegExp(choosedStr, "g")

return totalStr.replace(reg, '<span class="search_active">' + choosedStr + '</span>')

}

return totalStr

}

module.exports = {

filterTxt: filterTxt

}

然后在页面上直接注册一下这个wxs文件，调用即可

<rich-text nodes='{{tools.filterTxt(item.chainName, inpStr)}}'></rich-text>

其中rich-text可以去看下官方文档，nodes就是渲染的节点，支持Array和String，推荐使用Array，我们这里只能使用String好处理点，最后效果就这么简单的完成了

其中注意点：1.正则有变量的时候不能直接 /变量/g这种方式匹配，这样不会识别变量会当成普通的字符串进行匹配，正常h5中是

new RegExp(变量，‘img’)这种，但是在小程序wxs文件中又不支持这种（文档没看仔细，调试了好一会），要使用getRegExp(变量, 'img')这种方式形成正则匹配规则

2.rich-text里面的nodes使用字符串插入节点标签的时候，要用html标签，我开始一直使用小程序的标签text导致一直被过滤了，苦恼了一下，后来看官方文档发现这样一句话：“如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。”尝试了一下span标签，没想到成功了，所以记录下来，防止大家入坑

最后说一句：多看官方文档，谢谢大家