在实际的需求中,经常会对某些内容进行高亮处理,比如说搜索结果的高亮显示,尤其是处理某些富文本时。在这里对关键词做一个高亮显示的封装,以后难免还会遇到。
搜索结果的高亮显示
// 高亮显示
function highLight(searchtext,text) {
// 正则表达式 需要被替换的数据是一个变量时声明正则表达式对象
const reg = new RegExp(searchtext, 'gi')
const highStr = `<span class="active"">${searchtext}</span>`
return text.replace(reg, highStr)
}
// 输入的第一个参数是需要高亮显示的字符串,第二个参数是原字符串
// 函数返回的是处理后的字符串
封装完后,调用函数,然后添加active样式,比如设置字体的颜色、大小等等
如果没有效果的话,可以试试在类名前添加/deep/(我在vue中处理时是这么用的),起一个覆盖的作用。