[JavaScript]使页面内目标关键字高亮

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"
	);
posted @ 2020-10-20 13:35  千千寰宇  阅读(236)  评论(0编辑  收藏  举报