使用JS高亮页面当中的关键字

最新推荐文章于 2024-05-19 10:57:04 发布

最新推荐文章于 2024-05-19 10:57:04 发布 · 157 阅读

文章标签：

#HTML #工作

小技术小技巧专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个用于网页中高亮显示指定关键字的简单脚本。该脚本接收HTML节点ID、待高亮的关键字及颜色作为参数，并通过正则表达式实现对目标元素内文本的匹配与替换。

工作需要，自己写了个简单的高亮页面当中的关键字

 /**
     * 高亮关键字
     * @param nodeID 要高亮的HTML节点ID
     * @param key 要高亮的关键字
     * @param color 关键字的颜色
     */
    highLightKeyWord:function(nodeID, key, color) {
        var NodeID = nodeID || "";
        var keyWord = key || "";
        var keyColor = color || "red";
        var node = $("#"+nodeID);//可使用document.getElementById替换
        if (NodeID != "" && keyWord != "") {
            var pattern = new RegExp(keyWord, "gi");
            var html = node.html(); //可使用innerHTML替换
            html = html.replace(pattern, "<font color='"+keyColor+"'>" + keyWord + "</font>");
            node.html(html);//可使用innerHTML替换
        }
    }