一行代码实现「远程搜索」匹配搜索关键字，实时高亮显示

当input组件输入搜索关键字后，匹配当前输入的关键字处理高亮显示
效果如下图↓

Ajax请求回来数据之后，遍历数据，通过字符串的 replace 方法，将关键词包裹标签，加上高亮样式，替换对应字符串

list.forEach(str => item.content = str.replace(this.keyword, `<text style='color:#5E05BB;font-weight:bold'>${
      
      this.keyword}</text>`));

页面渲染时需要注意，因为替换后包含有html标签，所以需要用渲染富文本的形式去渲染， 比如 u-parse（uni-app） 组件

如果觉得有用随手点个赞吧，谢谢

关注我，不定时分享技术干货~

扫二维码关注公众号