小程序模糊搜索关键词红色高亮替换-无需插件

最新推荐文章于 2023-11-02 09:13:02 发布

ruisi_we

最新推荐文章于 2023-11-02 09:13:02 发布

阅读量642

点赞数

文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/ruisi_we/article/details/126356065

版权

小程序关键词高亮替换

写文章标准流程,先吐槽,小程序真**。

正题
之前写网页端直接字符串拼接标签,浏览器解析标签,实现变色或高亮,小程序居然不支持,查资料看到一种办法
使用小程序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解析实现模糊搜索关键词变色
  }