先看效果:
1.封装一个控制高亮的函数。
textItem是当前要过滤的内容,searchText是需要高亮的内容
//高亮函数封装
const textHighlighting = (textItem, searchText) => {
if (!searchText) return textItem;
const isTrue = textItem.includes(searchText); //判断是否包含需要高亮的文字
const result = ref(null);
if (isTrue) {
var reg = new RegExp(searchText, "g"); // 创建正则表达式
//这里使用replace方法,替换需要高亮的文字为span标签,然后把span标签的样式设置为高亮样式
// replace方法返回一个新的字符串,不会改变原来的字符串
// replace方法第一个参数是正则表达式
// replace方法第二个参数可以传函数,函数的返回值就是替换后的值,我这里直接传的结构
result.value = textItem.replace(
reg,
`<span style="color:#94cc61;">${searchText}</span>`
);
} else {
result.value = textItem;
}
return result.value;
};
2.在结构中使用
<div class="contentItem" v-for="(item, index) in list1" :key="index">
<div class="classP">
<div class="classTittle">链接:</div>
<span class="classSpan" v-html="textHighlighting(item.url, inputValue1)"></span>
</div>
</div>
效果实现,在此记录