小程序关键词高亮替换
写文章标准流程,先吐槽,小程序真**。
正题
之前写网页端直接字符串拼接标签,浏览器解析标签,实现变色或高亮,小程序居然不支持,查资料看到一种办法
使用小程序rich-text富文本标签
//wxml
<view class='user-name'>
<rich-text nodes="{{deviceName}}"></rich-text>
</view>
//js
//input---模糊搜索输入的字符串
var reg = new RegExp(input, "g") //全局匹配
var rep = '<span style="color:red">' + input + '</span>';
if (!util.isValidated(deviceName)) { //非空校验 ---自己封装的
deviceName= deviceName.replace(reg, rep); //将deviceName中和input匹配的替换成'<span style="color:red">' + input + '</span>',通过rich-text解析实现模糊搜索关键词变色
}
完毕.