前端文章字眼高亮处理

高亮处理
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';
}
},

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容