实现一个简单的搜索高亮功能

原创于 2025-02-23 12:42:56 发布 · 966 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #蓝桥杯 #javascript #前端

在开发 Web 应用时，搜索功能是常见的需求之一。为了提升用户体验，我们可以通过高亮显示搜索结果中的关键词来帮助用户快速定位信息。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现一个简单的搜索高亮功能。

1. 功能需求

我们的目标是实现一个简单的搜索框，用户可以在其中输入关键词。当用户点击搜索按钮时：

如果输入框为空，则清除所有已有的高亮。
如果输入框中有关键词，则在页面内容中查找并高亮显示所有匹配的文本。

2. HTML 结构

HTML 部分非常简单，包含一个搜索框、一个搜索按钮和一些示例文本内容。以下是完整的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索高亮功能</title>
   <!-- 写css的地方 -->
   <style></style>
</head>
<body>
    <div class="search-container">
        <input type="text" id="search-input" placeholder="请输入搜索关键词">
        <button id="search-button">搜索</button>
    </div>
    <div class="content">
        <p class="content-right">这是一个示例文本，用于演示搜索高亮功能。</p>
        <p class="content-right">你可以输入关键词，比如“示例”或“高亮”，看看效果。</p>
        <p class="content-right">这个功能使用了 JavaScript 来实现。</p>
    </div>

   
</body>
</html>

3. CSS 样式

为了提升视觉效果，我们使用 CSS 对页面进行简单的样式设计。以下是 styles.css 的内容：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

#search-input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 300px;
}

#search-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

#search-button:hover {
    background-color: #0056b3;
}

.content {
    margin: 20px;
}

.content-right {
    margin-bottom: 10px;
    padding: 10px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

em {
    background-color: yellow;
    font-weight: bold;
}

4. JavaScript 实现

JavaScript 是实现搜索高亮功能的核心部分。以下是代码的详细解析：

document.addEventListener("DOMContentLoaded", () => {
    const searchInput = document.getElementById("search-input");
    const searchButton = document.getElementById("search-button");
    const contentItems = document.querySelectorAll(".content-right");

    searchButton.addEventListener("click", () => {
        const keyword = searchInput.value.trim();

        // 清除之前的高亮
        contentItems.forEach(item => {
            item.innerHTML = item.textContent;
        });

        // 如果关键词不为空，则进行高亮
        if (keyword) {
            contentItems.forEach(item => {
                if (item.textContent.includes(keyword)) {
                    item.innerHTML = item.textContent.replace(
                        new RegExp(keyword, "gi"),
                        `<em>${keyword}</em>`
                    );
                }
            });
        }
    });
});

代码解析

5. 总结

通过简单的 HTML、CSS 和 JavaScript，我们实现了一个搜索高亮功能。这个功能不仅可以提升用户体验，还可以作为学习前端开发的一个很好的实践项目。你可以根据实际需求进一步扩展功能，例如支持动态内容更新或优化性能。

希望这篇文章对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。

获取 DOM 元素：
- 使用 document.getElementById 和 document.querySelectorAll 获取搜索框、搜索按钮和内容区域。
绑定点击事件：
- 为搜索按钮绑定点击事件，当用户点击按钮时触发搜索逻辑。
清除高亮：
- 在每次搜索前，清除之前的所有高亮内容。通过将 innerHTML 替换为 textContent，移除所有 <em> 标签。
高亮关键词：
- 如果用户输入的关键词不为空，使用 String.prototype.includes 判断内容中是否包含关键词。
- 使用正则表达式和 String.prototype.replace 方法将关键词替换为 <em> 包裹的文本，实现高亮效果。