快捷導(dǎo)航

JavaScript實(shí)現(xiàn)搜索高亮功能詳解

更新時(shí)間：2025年05月01日 09:30:33 作者：友人.227

這篇文章主要介紹了JavaScript實(shí)現(xiàn)搜索高亮功能,搜索功能是常見(jiàn)的需求之一,為了提升用戶(hù)體驗(yàn),我們可以通過(guò)高亮顯示搜索結(jié)果中的關(guān)鍵詞來(lái)幫助用戶(hù)快速定位信息,需要的朋友可以參考下

前言

在開(kāi)發(fā) Web 應(yīng)用時(shí)，搜索功能是常見(jiàn)的需求之一。為了提升用戶(hù)體驗(yàn)，我們可以通過(guò)高亮顯示搜索結(jié)果中的關(guān)鍵詞來(lái)幫助用戶(hù)快速定位信息。本文將介紹如何使用 HTML、CSS 和 JavaScript 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的搜索高亮功能。

1. 功能需求

我們的目標(biāo)是實(shí)現(xiàn)一個(gè)簡(jiǎn)單的搜索框，用戶(hù)可以在其中輸入關(guān)鍵詞。當(dāng)用戶(hù)點(diǎn)擊搜索按鈕時(shí)：

如果輸入框?yàn)榭?，則清除所有已有的高亮。
如果輸入框中有關(guān)鍵詞，則在頁(yè)面內(nèi)容中查找并高亮顯示所有匹配的文本。

2. HTML 結(jié)構(gòu)

HTML 部分非常簡(jiǎn)單，包含一個(gè)搜索框、一個(gè)搜索按鈕和一些示例文本內(nèi)容。以下是完整的 HTML 代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索高亮功能</title>
   <!-- 寫(xiě)css的地方 -->
   <style></style>
</head>
<body>
    <div class="search-container">
        <input type="text" id="search-input" placeholder="請(qǐng)輸入搜索關(guān)鍵詞">
        <button id="search-button">搜索</button>
    </div>
    <div class="content">
        <p class="content-right">這是一個(gè)示例文本，用于演示搜索高亮功能。</p>
        <p class="content-right">你可以輸入關(guān)鍵詞，比如“示例”或“高亮”，看看效果。</p>
        <p class="content-right">這個(gè)功能使用了 JavaScript 來(lái)實(shí)現(xiàn)。</p>
    </div>
</body>
</html>

3. CSS 樣式

為了提升視覺(jué)效果，我們使用 CSS 對(duì)頁(yè)面進(jìn)行簡(jiǎn)單的樣式設(shè)計(jì)。以下是 styles.css 的內(nèi)容：

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 實(shí)現(xiàn)

JavaScript 是實(shí)現(xiàn)搜索高亮功能的核心部分。以下是代碼的詳細(xì)解析：

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;
        });
        // 如果關(guān)鍵詞不為空，則進(jìn)行高亮
        if (keyword) {
            contentItems.forEach(item => {
                if (item.textContent.includes(keyword)) {
                    item.innerHTML = item.textContent.replace(
                        new RegExp(keyword, "gi"),
                        `<em>${keyword}</em>`
                    );
                }
            });
        }
    });
});

5. 總結(jié)

通過(guò)簡(jiǎn)單的 HTML、CSS 和 JavaScript，我們實(shí)現(xiàn)了一個(gè)搜索高亮功能。這個(gè)功能不僅可以提升用戶(hù)體驗(yàn)，還可以作為學(xué)習(xí)前端開(kāi)發(fā)的一個(gè)很好的實(shí)踐項(xiàng)目。你可以根據(jù)實(shí)際需求進(jìn)一步擴(kuò)展功能，例如支持動(dòng)態(tài)內(nèi)容更新或優(yōu)化性能。

希望這篇文章對(duì)你有所幫助！如果你有任何問(wèn)題或建議，歡迎在評(píng)論區(qū)留言。