js 搜索关键词高亮

来源：互联网发布：知乎平均学历编辑：程序博客网时间：2024/05/22 17:32

web开发需要高亮关键词，由于项目前后端分离，后端只提供搜索结果，前端负责搜索结果的关键词高亮。
如题，js 关键词高亮，直接上代码，firefox/chrome测试没问题，ie/safari/待测试。

<!DOCTYPE html>  <html>    <head>      <title>hi</title>      </head>    <body>      <div id="body">          <div name="hi">             a small test test small a        </div>          <div class="hi">              a small test test small a        </div>      </div>    </body>  <script>    function highlightByName(keywords,domName){        var array = keywords.split(" "); //分割        var targetContent=document.getElementsByName(domName);        for ( var t = 0; t < targetContent.length; t++) {            for ( var i = 0; i < array.length; i++) {                //创建表达式，匹配替换                var reg = new RegExp("(" + array[i].replace(/,/, "|") + ")", "g");                //替换重新写入                targetContent[t].innerHTML =targetContent[t].innerHTML.replace(reg,"<font color='red'>$1</font>");            }        }    }    function highlightByClass(keywords,className){        var array = keywords.split(" "); //分割        var targetContent=document.getElementsByClassName (className);        for ( var t = 0; t < targetContent.length; t++) {            for ( var i = 0; i < array.length; i++) {                //创建表达式，匹配替换                var reg = new RegExp("(" + array[i].replace(/,/, "|") + ")", "g");                //替换重新写入                targetContent[t].innerHTML =targetContent[t].innerHTML.replace(reg,"<font color='red'>$1</font>");            }        }    }    highlightByName("small","hi");    highlightByClass("test","hi");</script></html>

测试地址，粘贴即可看到效果。

第一个方法是按name属性搜索dom，第二个方法是按class属性搜索dom，关键词之间按照空格切分。

只是作为demo参考，两个方法在同一个页面使用可能会出现冲突，实际使用还要注意切分单词，不能随意高亮。

0 0