搜索框搜索关键字 返回结果后改变关键字颜色

99 阅读1分钟
效果

gjz.png

  • 我这里是数组 页面循环出来的数据 直接调用brightenKeyword()方法
   <p class="ent_text else3" v-html="brightenKeyword(item.introduction)"</p>
   item.introduction 是需要查找的整段文字
    方法
   brightenKeyword(val){
      let  keyword = this.newSearchingText
      if (keyword) {
         let replaceReg = new RegExp(keyword, "g");// 匹配关键字正则
        // 高亮替换v-html值
        let replaceString = '<span style="color:#F0142F;">' + keyword + "</span>";
         // 开始替换
        val = val.replace(replaceReg, replaceString);    
       }
      return val
   },