项目中需求-文字高亮

jiezi

5 年前

- 实际项目中的文字高亮自己实现的方法，本来可以使用 vue 过滤器我懒就写了个方法直接上代码

<div class="name">
  <span
    class="txt"
    @click="goAderHome(item.ader_id)"
    v-html="highLight(item.short_name,lightval)"
  >{{}}</span>
</div>

上面 highLifht 是方法

 // 高亮方法
    highLight: function(msg, highLightStr) {
      //msg 是需要高亮的句子   highLightStr 是高亮关键字
      let arr = highLightStr.split("");
      arr = Array.from(new Set(arr)); //es6 数组去重
      let arrmsg = msg.split(""); // 句子变成数组

      for (let j = 0; j < arrmsg.length; j++) {
        // 对句子数组进行循环
        for (let item of arr) {
          if (arrmsg[j] === item.toUpperCase() ||
            arrmsg[j] === item.toLowerCase()) {arrmsg[j] =
              "<span style='color: #01CAF8;'>" + arrmsg[j] + "</span>";
          }
        }
      }
      return arrmsg.join(""); // 数组转字符串
    },

估计都会就是基础的方法具体看注释

搜索结果文字高亮显示