搜索关键词，后端返回数据，前端做关键词高亮

实现的效果

前端通过输入关键词后，接口返回一个数组，一个对象里面包含id等信息，点击标题实现跳转
1.ig代表全局搜索以及忽略大小写，使用map遍历数组，将其标签添加到字符串里面，然后使用v-html渲染到页面。

changeColor(arr, keyword) {
    arr.map((item, index) => {
	if (keyword) {
		let reg = new RegExp(keyword, 'ig')
		let str = `<span style="color: #007AFF">${keyword}</span>`
		arr[index].title = item.title.replace(reg, str)
		if (arr[index].content) {
			arr[index].content=this.abstractFn(arr[index].content)
			arr[index].content = item.content.replace(reg, str)
		}
	}
})
	return arr
},

2.由于文章是采用markdown写的，这里要使用正则表达式去将markdown语法替换掉，展示出来就不会很奇怪。这里根据自己的需要去进行替换。

abstractFn(res){
    if(!res){
	return '';
    }else{
    var str=res.replace(/\!\[[\s\S]*?\]\([\s\S]*?\)/g,'')//全局匹配图片
	.replace(/\[[\s\S]*?\]\([\s\S]*?\)/g,'')//全局匹配连接
	.replace(/[\s]*[-\*\+]+(.*)/g,'')//全局匹配无序列表
	.replace(/[\s]*[0-9]+\.(jpg|png).*$/g,'')//全局匹配png，jpg的之后的所有字符
	.replace(/\!\[[\s]*[0-9]+\.(.*)/g,'')//匹配去掉![数字.png]
	.replace(/\!\[/g,'')//匹配去掉![]
	return str.slice(0,155);
    }
},

可以参考：原文连接 blog.huanghanlian.com/article/5c8…
关键代码如下：

function abstractFn(res){
  if(!res){
    return '';
  }else{
    var str=res.replace(/(**|__)(.*?)(**|__)/g,'')          //全局匹配内粗体
    .replace(/![[\s\S]*?]([\s\S]*?)/g,'')                  //全局匹配图片
    .replace(/[[\s\S]*?]([\s\S]*?)/g,'')                    //全局匹配连接
    .replace(/</?.+?/?>/g,'')                                 //全局匹配内html标签
    .replace(/(*)(.*?)(*)/g,'')                               //全局匹配内联代码块
    .replace(/`{1,2}[^`](.*?)`{1,2}/g,'')                       //全局匹配内联代码块
    .replace(/```([\s\S]*?)```[\s]*/g,'')                       //全局匹配代码块
    .replace(/~~(.*?)~~/g,'')                               //全局匹配删除线
    .replace(/[\s]*[-*+]+(.*)/g,'')                           //全局匹配无序列表
    .replace(/[\s]*[0-9]+.(.*)/g,'')                           //全局匹配有序列表
    .replace(/(#+)(.*)/g,'')                                    //全局匹配标题
    .replace(/(>+)(.*)/g,'')                                    //全局匹配摘要
    .replace(/\r\n/g,"")                                        //全局匹配换行
    .replace(/\n/g,"")                                          //全局匹配换行
    .replace(/\s/g,"")                                          //全局匹配空字符;
    return str.slice(0,155);
  }
}