文字高亮
如上图,可能在搜索之类的时候需要将搜索内容进行高亮,下面聊聊小程序和 web 上如何实现。
web 上做法
可以通过正则表达式/(高亮的文字)/
来实现
function highlight(str, sep, color) {
const reg = new RegExp(`\(${sep}\)`, 'g');
return str.replace(reg, `<i style="color:${color};">$1</i>`);
}
highlight('安徽省合肥市', '安徽', 'reg');
// <i style="color:reg;">安徽</i>省合肥市
这里实现比较简单,稍微注意一下replace
api 即可,它还可以接收一个函数作为参数,具体内容这里不做讲解了只简单实现一下。
小程序做法
不同于 web,因为小程序无法手动管理 dom
样式,所以思路是将高亮文字
和普通文字区分开来,例如:
var str = '安徽省合肥市蜀山区';
// 如果高亮合肥市,那么我们把他转化为下面这种形式的数组
['安徽省', '合肥市', '蜀山区'];
将普通文字和高亮文字通过数组的形式区分开来,之后再通过<text>
标签将转换后的数组for
循环,每次循环的结果与高亮文字对比,如果符合就添加高亮样式。
<view>
<text
style="{{item === keyWord ? 'color:' + color + ';' : ''}}"
wx:for="{{arr}}"
wx:key="item"
>
{{item}}
</text>
</view>
整体的思路就是这样,下面说一下实现的细节。
- 怎么将一段文字转化为上面数组的形式
其实这块要分为两步,将文字转化为数组我们可以用
split
的方法,之后通过一个变异的join
将他们拼成数组。
function join(array, str) {
const arr = [];
const len = array.length;
for (let i = 0; i < len - 1; i++) {
const value = array[i];
if (!value) {
arr.push(str);
} else {
arr.push(value, str);
}
}
if (array[len - 1]) {
arr.push(array[len - 1]);
}
return arr;
}
把上面的wxml
代码片段和join
相关组合一起就可以实现一个文字高亮的效果了。
为了方便使用,我这里已经封装成一个库了highlight
最后
相关代码整合到了Github
如果对你有帮助可以star
支持作者一下。