项目中需求 文字高亮

搜索结果文字高亮显示

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

<div class="name">
  <span
    class="txt"
    @click="goAderHome(item.ader_id)"
    v-html="highLight(item.short_name,lightval)"
  >{{}}</span>
</div>
  1. 上面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(""); //数组转字符串
    },

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

    原文作者:94_青年
    原文地址: https://segmentfault.com/a/1190000020157239
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞