如何利用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>"
? ? ? ? }); //替換key
? ? ? ? text = text.replace(/{~}/g, function () { //恢復html標簽
? ? ? ? ? ? num++;
? ? ? ? ? ? return aHtml[num];
? ? ? ? });
? ? ? ? return text;
? ? }
? ? document.getElementById("demo").innerHTML = redKeywords("隨機森林", "作為新興起的、高度靈活的一種機器學習算法，隨機森林（Random Forest，簡稱RF）擁有廣泛的應用前景，從市場營銷到醫療保健保險，既可以用來做市場營銷模擬的建模，統計客戶來源，保留和流失，也可用來預測疾病的風險和病患者的易感性。最近幾年的國內外大賽，包括2013年百度校園電影推薦系統大賽、2014年阿里巴巴天池大數據競賽以及Kaggle數據科學競賽，參賽者對隨機森林的使用占有相當高的比例。所以可以看出，Random Forest在準確率方面還是相當有優勢的。")
</script>
?
</html>
二、程序運行效果
?
文章鏈接： http://www.qzkangyuan.com/12465.html
文章標題：JS實現HTM搜索關鍵詞高亮顯示
文章版權：夢飛科技所發布的內容，部分為原創文章，轉載請注明來源，網絡轉載文章如有侵權請聯系我們！
