vue实现搜索结果高亮，复制粘贴即可。

场景：

我们通过搜索后期望在搜索结果列表中带有关键词的词高亮显示。

思路：

对搜索列表的结果数据进行再渲染，一般场景下是通过 v-html 来进行渲染（双大括号无法解析html标签）：

//在methods中定义函数
//通过replace函数全局替换搜索键值
//参数html为需高亮显示的内容，如搜索标题、搜索内容等
highlightHTML:function(html,searh_key){
    if(!searh_key) return html;
    html = String(html);
    searh_key = String(searh_key);
    html = html.replace(new RegExp(searh_key,'g'),`<span style="color:tomato;font-weight:bold">${searh_key}</span>`);
    return html;
}

//调用highlightHTML函数
 <div v-html="highlightHTML(html,search_key)"></div>

但有时候是搜索内容通过render函数来解析的，如view UI中Table组件，导致我们不能通过v-html的方式来渲染，则可以：

render:(h,params)=>{
    return h('div',{
        domProps:{
            innerHTML:this.highlightHTML(params.html,this.searchKey)
        }
    });
}

结果：