前端文章字眼高亮处理

2023-09-20  本文已影响0人  给我小前端

高亮处理
hightLight(searchVal) {
console.log(searchVal)
let textEle = document.getElementById('out-table'); //获取文本内容;
var text = textEle.innerHTML
let searchKeywords = searchVal; //为了方便演示,这里关键词直接写死
searchKeywords = searchKeywords.replace(/;|;/g, ',');
let searchArray = [];
searchArray = searchKeywords.split(',');//把关键词列为一个数组
searchArray.forEach((keyword) => { //循环关键词数组
if (keyword && text.indexOf(keyword) !== -1) {
let regHtml = new RegExp("<.*?>", "ig"); //定义html正则
let dealHtml = text.match(regHtml); //符合的html定义一个数组
let num = -1;
text = text.replace(regHtml, '{~}'); //用一个特殊字符进行替换
text = text.replace(new RegExp(keyword, 'g'), <span style="color:#91C52D;">${keyword}</span>);
//把原来~代表的html标签,再替换回来
text = text.replace(/{~}/g, function () {
num++;
return dealHtml[num]; //进行依次替换
});
}
})
textEle.innerHTML = text;
},
取消高亮
initText(){
let spanArr=document.getElementById("out-table").getElementsByTagName("span")
for (let i=0;i<spanArr.length;i++){
spanArr[i].style.color='#606266';
}
},

上一篇 下一篇

猜你喜欢

热点阅读