javascript 多个搜索词|关键词高亮

最新推荐文章于 2023-12-27 17:51:36 发布

axl234

最新推荐文章于 2023-12-27 17:51:36 发布

阅读量703

点赞数

CC 4.0 BY-SA版权

分类专栏： css javascript 文章标签： javascript php xhtml ViewUI

本文链接：https://blog.youkuaiyun.com/axl234/article/details/84233757

javascript 同时被 2 个专栏收录

158 篇文章

订阅专栏

css

104 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的文章关键词高亮显示方法。通过分析关键词并应用正则表达式匹配，该方法能够动态地为文章中的指定关键词添加样式，以达到视觉上的突出效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style>
.highlight{ background-color:#ff0; color:#000;}
</style>
我是无辜的关键词，躺着不中枪
<hr>
<div id="content"> 用JS让文章内容指定的关键字加亮
是这样的.. <a href="#">现在有这些关键字:美容,生活,购物</a> 当在文章里头出现这些关键字,就把它加亮显示..
文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
不知道怎样来实现这样的功能啊?特此求助 </div>
<script type="text/javascript">
/*----------------------------------------*
* 参数说明:
* obj: 对象, 要进行高亮显示的html标签节点.
* hlWords: 字符串, 要进行高亮的关键词词, 使用竖杠(|)或空格分隔多个词 .
* cssClass: 字符串, 定义关键词突出显示风格的css伪类.
* 参考资料: javascript HTML DOM 高亮显示页面特定字词
\*----------------------------------------*/
function MarkHighLight(obj, hlWords, cssClass) {

hlWords = AnalyzeHighLightWords(hlWords);

    if (obj == null || hlWords.length == 0) return;
    if (cssClass == null) cssClass = "highlight";
    MarkHighLightCore(obj, hlWords);

    //------------执行高亮标记的核心方法----------------------------
    function MarkHighLightCore(obj, keyWords) {
        var re = new RegExp(keyWords, "i");

for (var i = 0; i < obj.childNodes.length; i++) {

            var childObj = obj.childNodes[i];
            if (childObj.nodeType == 3) {
                if (childObj.data.search(re) == -1) continue;
                var reResult = new RegExp("(" + keyWords + ")", "gi");
                var objResult = document.createElement("span");
                objResult.innerHTML = childObj.data.replace(reResult, "<span class='" + cssClass + "'>$1</span>");
                if (childObj.data == objResult.childNodes[0].innerHTML) continue;
                obj.replaceChild(objResult, childObj);
            } else if (childObj.nodeType == 1) {
                MarkHighLightCore(childObj, keyWords);
            }
        }
    }

    //----------分析关键词----------------------
    function AnalyzeHighLightWords(hlWords) {
        if (hlWords == null) return "";
        hlWords = hlWords.replace(/\s+/g, "|").replace(/\|+/g, "|");
        hlWords = hlWords.replace(/(^\|*)|(\|*$)/g, "");

if (hlWords.length == 0) return "";
var wordsArr = hlWords.split("|");

        if (wordsArr.length > 1) {
            var resultArr = BubbleSort(wordsArr);
            var result = "";
            for (var i = 0; i < resultArr.length; i++) {
                result = result + "|" + resultArr[i];
            }
            return result.replace(/(^\|*)|(\|*$)/g, "");

        } else {
            return hlWords;
        }
    }

    //-----利用冒泡排序法把长的关键词放前面-----
    function BubbleSort(arr) {
        var temp, exchange;
        for (var i = 0; i < arr.length; i++) {
            exchange = false;
            for (var j = arr.length - 2; j >= i; j--) {
                if ((arr[j + 1].length) > (arr[j]).length) {
                    temp = arr[j + 1];
                    arr[j + 1] = arr[j];
                    arr[j] = temp;
                    exchange = true;
                }
            }
            if (!exchange) break;
        }
        return arr;
    }