微信小程序实现高亮效果

大体思路：
根据要搜索的关键字，将现有的字符串切割成多分，存放在某个数组中；前台显示时候通过，循环数据绑定，循环输出这些被切割的字符串。

js代码：

sCallback: function (res) {//ajax回调函数
if (res.code == 1) {
var list = res.data.list;
//实现高亮
for (var i = 0; i < list.length; i++) {
var oldTitle = list[i].title;
var titleLight = [];
if (keywords){//如果有搜索关键字
//调用高亮函数
titleLight = that.light(keywords, oldTitle, titleLight);
} else {//如果没有搜索关键字
titleLight.push({ key: false, word: oldTitle });
}
list[i].titleLight = titleLight;
}
res.data.list = list;
//实现高亮结束
callback && callback(res.data);
}

/*
* 高亮封装
* key 是关键字
* word 是要检索的字符串
* new_arry 接收截取的字符串
*/
light(key, word, new_arry){
var index = word.indexOf(key);
if (index > -1){
var part_before = word.slice(0, index);//截取 关键字前面部分 字符串
var part_after = word.slice(index + key.length, );//截取 关键字后面部分 字符串
new_arry.push({ key: false, word: part_before });
new_arry.push({ key: true, word: key });
if (part_after.indexOf(key) > -1) {//如果关键字后面部分 字符串 还存在 关键字key，利用递归在继续查询
this.light(key, part_after, new_arry);
} else {//否则 将关键字后面部分 字符串压入数组
new_arry.push({ key: false, word: part_after });
}
}
return new_arry;
}

小程序代码：

 <block wx:for="{{item.titleLight}}" wx:for-item="item_word">
    <text class="{{item_word.key ? 'select_title_left_top_remark' :''}}">{{item_word.word}}</text>
 </block>