jquery 关键词高亮

基础概念

jQuery 关键词高亮是一种在前端网页上将特定关键词以不同颜色或样式突出显示的技术。这种技术常用于搜索引擎结果页面、文章内容、代码编辑器等场景，以提高用户体验和可读性。

类型

简单文本高亮：将关键词直接替换为带有特定样式的HTML标签（如<span>）。
正则表达式高亮：使用正则表达式匹配关键词并进行高亮处理。
HTML内容高亮：处理包含HTML标签的内容，确保高亮不会破坏原有的HTML结构。

应用场景

搜索引擎结果页面
文章内容展示
代码编辑器和IDE
数据表格和列表

示例代码

以下是一个简单的jQuery示例，展示如何实现关键词高亮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 关键词高亮</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="content">
        这是一个示例文本，我们将高亮显示其中的关键词。
    </div>

    <script>
        $(document).ready(function() {
            var keyword = "关键词";
            var content = $('#content').html();
            var highlightedContent = content.replace(new RegExp(keyword, 'g'), '<span class="highlight">' + keyword + '</span>');
            $('#content').html(highlightedContent);
        });
    </script>
</body>
</html>