内容处理高亮
1.高亮处理函数
// keyWord 匹配字符
// suggtion 匹配内容段
export function hightLight (keyWord, suggtion) {
// 使用 regexp 构造函数，因为这里要匹配的是一个变量
const reg = new RegExp(keyWord, 'ig')
//内容段匹配以及添加样式
const newSrt = String(suggtion).replace(reg, function (p) {
return "<span style='color: red'>" + p + '</span>'
})
// 返回处理后的值
return newSrt
}
2.HTML 展示
1》 数据
// 数据
data() {
return {
keyWord: '高亮'
suggtion: '在前端开发中，要实现文字搜索高亮效果，你可以使用JavaScript来搜索文本并通过CSS或其他方式对匹配的文本进行高亮处理。以下是一种常见的方法,在前端开发中，要实现文字搜索高亮效果，你可以使用JavaScript来搜索文本并通过CSS或其他方式对匹配的文本进行高亮处理。以下是一种常见的方法'
}
}
2》 标签展示
// 标签展示
<span v-html="hightLightValue(keyWord, suggtion)"></span>
3》 高亮内容
// 高亮内容
hightLightValue(keyWord, suggtion) {
return hightLight(keyWord, suggtion)
},
3.最终得到的结果
微信截图_20240624160640.png
