微信小程序实现全局搜索代码高亮

最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的value值替换为需要的dom节点，并且通过rich-text来实现，高亮效果。

在实现的过程中主要考虑，不同类型的数据结构，过滤掉特殊符号，url这些基本需求；同时在实现的过程中每次都要去处理最原始的数据，这就需要考虑到对象的深拷贝问题，目前所采用的方法是通过JSON.parse(JSON.stringify(str))来处理，因为在这个全局搜索的项目中不太会用到函数这些对象。最后通过replace方法来处理这些目标字符串。

wxml:

js:

标签数据在data中定义， 因为还要点击高亮， 所以同时给个状态值

页面循环渲染出来

点击事件bindtap='select',

绑定class: class="{{item.isSelect?'active':'select'}}", 点击的时候改变类名

自定义dataset :data-index="{{index}}"

样式效果

JS部份

到这儿, 高亮的就已经写好了. 怎么取值呢? 下面还有一个保存按钮. 给保存按钮一个点击事件:

1.定义一个空数据

2.遍历上边的data里的selectall数组, 传两个参数, v是所有标签的状态(比如isSelect:false或isSelect:true), i是下标.

看打印结果

---