如何利用JS实现HTML搜索关键词高亮显示呢？
目录
一、程序案例代码
二、程序运行效果
一、程序案例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS实现HTM搜索关键词高亮显示</title><style>.search {color: red;}</style></head><body><div id="demo"></div></body><script >// JS实现HTM搜索关键词高亮显示/*** kw:搜索关键词* text:待匹配的文本**/function redKeywords(kw, text) {var reg = /<script[^>]*>(.|\n)*<\/script>/gi; //去掉script标签 text = text.replace(reg, "");var num = -1;var kwReg = new RegExp(kw, "gi"); //匹配传入的搜索值不区分大小写 i表示不区分大小写，g表示全局搜索var htmlReg = new RegExp("\<.*?\>", "ig"); //匹配html元素var aHtml = text.match(htmlReg); //存放html元素的数组var arr = text.match(kwReg);a = -1;text = text.replace(htmlReg, '{~}'); //替换html标签text = text.replace(kwReg, function () {a++;return "<span class='search'>" + arr[a] + "</span>"}); //替换keytext = text.replace(/{~}/g, function () { //恢复html标签num++;return aHtml[num];});return text;}document.getElementById("demo").innerHTML = redKeywords("随机森林", "作为新兴起的、高度灵活的一种机器学习算法，随机森林（Random Forest，简称RF）拥有广泛的应用前景，从市场营销到医疗保健保险，既可以用来做市场营销模拟的建模，统计客户来源，保留和流失，也可用来预测疾病的风险和病患者的易感性。最近几年的国内外大赛，包括百度校园电影推荐系统大赛、阿里巴巴天池大数据竞赛以及Kaggle数据科学竞赛，参赛者对随机森林的使用占有相当高的比例。所以可以看出，Random Forest在准确率方面还是相当有优势的。")</script></html>
