vue自定义指令：字体高亮

今天遇到一个问题：是关于页面部分文字高亮的问题：

正常情况下是没啥问题的，当搜索匹配的内容如下时，就会出现下面的情况：

js实现页面搜索内容后，检索到的内容高亮展示——正则匹配

之前的处理思路是：通过接口获取到表格数据后，对其中的部分字段进行正则匹配，匹配成功后，将关键字替换为span标签，直接改变对应的字段，然后用v-html渲染对应的字段。

这个方法当前看上去没啥问题，但是今天当用户搜索：pa时就出现了上面的情况。pa好像也匹配到了span上的pa，导致页面出现了上面的混乱情况。

下面介绍两种简单的处理方法：

1.v-xxx指令的形式

1.1 vue指令的定义

如果是MVVM的项目，则可以在main.js或者其他的js文件中，引入import Vue from ‘vue’，然后书写下面的代码：

import Vue from 'vue'
Vue.directive('highlight',{
 bind(el,binding,vnode){
  const {value} = binding;
  if(value && typeof value==='object'){
   const {hWord,word} = value;
   el.innerHTML = word.replace(new RegExp(hWord,'ig'),(a)=>{
    return `<span style="background:yellow">${a}</span>`
   })
  }
 },
 update(el,binding,vnode){
  const {value} = binding;
  if(value&&typeof value==='object'){
   const {hWord,word} = value;
   el.innerHTML = word.replace(new RegExp(hWord,'ig'),(a)=>{
    return `<span style="background:yellow">${a}</span>`
   })
  }
 }
})

1.2.v-highlight指令的使用

<div v-highlight="{ hWord: '测试|字', word: '测试高亮字体' }"></div>

效果如下：

如果要匹配多个，需要用|拼接后再进行传递。

2.函数的使用

<div v-html="getHighLight(word)"></div>

export default{
 data(){
  return {
   word:'测试高亮字体',
   hWord:['测试','字']
  }
 },
 methods:{
  getHighLight(word) {
       var reg = this.hWord.join("|");
       return word.replace(new RegExp(reg, "ig"), (a) => {
         return `<span style="background:yellow;">${a}</span>`;
       });
     },
 }
}