[JavaScript]使頁面內目標關鍵字高亮
阿新 • • 發佈:2020-10-20
1 原始碼
function keywordHighlighten(querySelector, key, bgColor){//文字關鍵字高亮 var doms = document.querySelectorAll(querySelector); //console.log("target doms:", doms); doms.forEach(function(element, index, array){ var oDiv = element; var oChilds = oDiv.childNodes; var color = isNaN(bgColor)==true?bgColor : "orange"; //console.log("color:", color); var sKey = "<span style='background-color: "+color+";'>"+key+"</span>"; var rStr = new RegExp(key, "g"); for(var i =0; i<oChilds.length-1; i++){ if(oChilds[i].nodeType == 3 && /\s/.test(oChilds[i].nodeValue)){ //刪除空白的節點 oChilds[i].parentNode.removeChild(oChilds[i]); } oChilds[i].innerHTML = oChilds[i].innerHTML.replace(rStr,sKey); //替換key } }); return doms; } function keywordsHighlighten(querySelector, keywords, bgColor){//同文本同DOM下的批量關鍵字高亮 keywords.forEach(function(element, index, array){ var keyword = element; keywordHighlighten(querySelector, keyword, bgColor); }); }
keywordsHighlighten(
"body",
[
"172.78.6.13",
"172.78.6.17",
"172.78.6.18",
"172.78.6.19",
"172.78.6.20",
"172.78.6.21",
"172.78.6.42",
"172.78.6.43",
"172.78.6.44"
],
"red"
);