zoukankan      html  css  js  c++  java
  • [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"
    	);
    
  • 相关阅读:
    Cannot change version of project facet Dynamic web module to 3.0
    mybatis
    mybatis逆向工程工具
    mybatis和jdbc分析
    分析mybatis和jdbc的作用,已经原理
    JDBC使用步骤
    MyBatis架构设计及源代码分析系列(一):MyBatis架构
    MyBatis的foreach语句详解
    vue.js使用elemnetUi
    vue.js路由嵌套传参
  • 原文地址:https://www.cnblogs.com/johnnyzen/p/13846021.html
Copyright © 2011-2022 走看看