运用JS将搜索的关键字高亮显示

封面图 • 2025-04-27 • JavaScript

在前端开发中，经常需要将用户输入的搜索关键字在页面内容中高亮显示。可以使用 JavaScript 来实现这一功能。以下是一个简单的示例代码，展示如何将搜索关键字高亮显示：

### 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>
    <style>
        /* 定义高亮样式 */
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>这是一个示例页面</h1>
    <p id="content">
        这是一个简单的示例页面，用于演示如何将搜索关键字高亮显示。你可以输入任意关键字来查看效果。
    </p>
    <br>
    <label for="keyword">请输入搜索关键字：</label>
    <input type="text" id="keyword" placeholder="输入关键字">
    <button onclick="highlight()">高亮</button>

### JavaScript 实现
```javascript
function highlight() {
    // 获取用户输入的关键字
    const keyword = document.getElementById('keyword').value.trim();

// 如果没有输入关键字，直接返回
    if (!keyword) {
        return;
    }

// 获取要高亮的内容元素
    const contentElement = document.getElementById('content');

// 获取原始内容
    let contentText = contentElement.innerHTML;

// 创建正则表达式，忽略大小写
    const regex = new RegExp(keyword, 'gi');

// 使用正则表达式替换关键字为带有高亮样式的HTML
    contentText = contentText.replace(regex, `<span class="highlight">${keyword}</span>`);

// 更新内容
    contentElement.innerHTML = contentText;
}
```

### 代码说明：
1. **HTML部分**：
   - 页面包含一个段落（`<p>`标签），其 `id` 为 `content`，用于存放需要高亮显示的内容。
   - 提供一个输入框和按钮，用户可以在输入框中输入关键字，并点击按钮触发高亮操作。

2. **CSS部分**：
   - 定义了一个 `.highlight` 类，用于设置高亮的背景颜色（黄色）。

3. **JavaScript部分**：
   - `highlight()` 函数负责处理高亮逻辑。
   - 首先获取用户输入的关键字，并检查是否为空。
   - 然后获取目标内容元素（`#content`），并将其内容存储为字符串。
   - 使用正则表达式（`new RegExp(keyword, 'gi')`）来匹配关键字，并忽略大小写。
   - 将匹配到的关键字用 `<span class="highlight">` 包裹，生成新的 HTML 字符串。
   - 最后更新目标内容的 HTML 内容。

### 示例效果：
假设用户输入的关键字是 "示例"，那么页面中的内容会变成：
```html
<p id="content">
    这是一个<span class="highlight">示例</span>页面，用于演示如何将搜索关键字<span class="highlight">示例</span>高亮显示。你可以输入任意关键字来查看效果。
</p>
```

### 注意事项：
1. 如果需要支持多个关键字同时高亮，可以在输入框中允许用户输入多个关键字，并在 JavaScript 中对每个关键字分别进行高亮处理。
2. 可以进一步优化，例如在高亮时保留原有的格式，或者在用户清空输入框时自动移除高亮。

希望这个示例对你有所帮助！