jquery实现页面关键词高亮显示的方法

jQuery实现页面关键词高亮显示的方法

在网页中实现关键词高亮，可以使用jQuery来完成。具体实现步骤如下：

步骤一：获取关键词

将需要高亮的关键词保存为一个变量。

var keyword = "高亮";

步骤二：获取文本

从需要高亮的标签中获取文本。

var content = $("#content").text();

步骤三：高亮关键词

使用正则表达式匹配关键词，并使用html标签将匹配到的关键词高亮显示。

var re = new RegExp(keyword, "gi");
content = content.replace(re, "<span class='highlight'>" + keyword + "</span>");

步骤四：显示结果

将高亮后的文本放回标签中显示。

$("#content").html(content);

示例一

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>关键词高亮示例</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(function(){
            var keyword = "高亮";
            var content = $("#content").text();
            var re = new RegExp(keyword, "gi");
            content = content.replace(re, "<span class='highlight'>" + keyword + "</span>");
            $("#content").html(content);
        });
    </script>
</head>
<body>
    <div id="content">
        这是关键词高亮示例，可以使用jQuery来完成关键词的高亮显示。
    </div>
</body>
</html>

示例二

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>关键词高亮示例</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(function(){
            var keyword = "高亮";
            $("p").each(function(){
                var content = $(this).text();
                var re = new RegExp(keyword, "gi");
                content = content.replace(re, "<span class='highlight'>" + keyword + "</span>");
                $(this).html(content);
            });
        });
    </script>
</head>
<body>
    <p>这是关键词高亮示例，可以使用jQuery来完成关键词的高亮显示。</p>
    <p>关键词高亮功能可以应用到文章、资讯、搜索结果等多个场景中。</p>
</body>
</html>

以上两个示例展示了如何使用jQuery来实现简单的关键词高亮功能。可以将上述示例代码下载存放在本地，进行实际运行测试。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现页面关键词高亮显示的方法 - Python技术站