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

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

之前的处理思路如下链接：
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>`;
	      });
	    },
	}
}

效果如下：

本来是想用过滤器来处理，不过v-html中不能使用过滤器，所以最终用的是函数的形式。

问题解决！！！