vue实现搜索结果高亮

业务需求

实现搜索功能，搜索后展示结果列表，其中关键字要能够高亮显示

实现思路

采用自定义指令实现，获取HTML的内容，根据指令传入的关键字，利用String.split()拆分后把关键字放到span标签中在拼接回去，增加一个带类名span，可以自定义样式。

一开始想用v-html直接实现增加一个span包裹关键字，然后发现eslint设置了不用v-html，就没有用v-html指令。

具体代码

/src/directive/heightline.js

export default {
  bind: function(el, binding) {
    const { value } = binding;
    let str = ''
    let textArr = el.innerHTML.split(value);
    textArr.forEach((item, index) => {
      if (index < textArr.length - 1) {
        str = str + item + `<span class="text-height-line">${value}</span>`
      } else {
        str = str + item
      }
    })
    el.innerHTML = str
  }
}

/src/directive/index.js

import heightline from "./heightline";
const install = function(Vue) {
  Vue.directive('heightline', heightline)
}
if (window.Vue) {
  window.heightline = heightline;
    Vue.use(install) 
}
heightline.install = install;
export default heightline;

/src/main.js

import Vue from 'vue'
import heightline from './directive/heightline';
Vue.use(heightline)
// ...

页面使用

<span v-heightline="'关键字'">搜索结果的关键字文本</span>

<style>
/deep/.text-height-line{
        color:  #1a91ff;
      }
</style>