內(nèi)容處理高亮
1.高亮處理函數(shù)
// keyWord 匹配字符
// suggtion 匹配內(nèi)容段
export function hightLight (keyWord, suggtion) {
// 使用 regexp 構(gòu)造函數(shù)八匠，因為這里要匹配的是一個變量
const reg = new RegExp(keyWord, 'ig')
//內(nèi)容段匹配以及添加樣式
const newSrt = String(suggtion).replace(reg, function (p) {
return "<span style='color: red'>" + p + '</span>'
})
// 返回處理后的值
return newSrt
}
2.HTML 展示
1》 數(shù)據(jù)
// 數(shù)據(jù)
data() {
return {
keyWord: '高亮'
suggtion: '在前端開發(fā)中，要實現(xiàn)文字搜索高亮效果，你可以使用JavaScript來搜索文本并通過CSS或其他方式對匹配的文本進行高亮處理告喊。以下是一種常見的方法,在前端開發(fā)中申窘，要實現(xiàn)文字搜索高亮效果，你可以使用JavaScript來搜索文本并通過CSS或其他方式對匹配的文本進行高亮處理。以下是一種常見的方法'
}
}
2》 標簽展示
// 標簽展示
<span v-html="hightLightValue(keyWord, suggtion)"></span>
3》 高亮內(nèi)容
// 高亮內(nèi)容
hightLightValue(keyWord, suggtion) {
return hightLight(keyWord, suggtion)
},
3.最終得到的結(jié)果
微信截圖_20240624160640.png
