vue 实现搜索标红功能

思路：将搜索出来的匹配文本包裹span标签，并附上标红相关样式，因为涉及到DOM操作，所以写成指令。代码实现如下

import Vue from 'vue'

function hightLight(el, binding) {
  const match = binding.value;
  const reg = new RegExp(match, 'g')
  const txt = binding.arg
  let str = '';
  if (txt) {
    str = txt.replace(reg, `<span style="color:#F96600">${match}</span>`)
  } else {
    str = ''
  }
  el.innerHTML = str;
}

Vue.directive('hightlight', {
  bind(el, binding) {
    hightLight(el, binding)
  },
  componentUpdated(el, binding) {
    hightLight(el, binding)
  }
})

使用：引入该指令，然后使用方法如下

v-hightlight:[搜索出来的文本]="搜索关键词"

由于包裹span后的文本会被转义，直接从DOM中拿是转义后的文本，搜索结果改变时，需再次进行匹配包裹，如果搜索结果文本直接冲DOM里面拿，匹配起来比较麻烦，所以件搜索出来的文本作为参数传递进去。