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

封面图 • 2025-11-08 • JavaScript

在 JavaScript 中，你可以通过以下方法将网页中某个关键词高亮显示。这个方法通常用于搜索功能中，当用户输入关键字后，将匹配的关键字用 `<span>` 包裹，并设置样式（如背景色）来实现高亮。

---

### ✅ 示例：使用 JS 高亮搜索关键字

#### 1. HTML 结构
```html
<div id="content">
  这是一个示例文本，用来演示如何高亮搜索关键字。
</div>

<input type="text" id="searchInput" placeholder="输入要搜索的关键字">
<button onclick="highlightKeyword()">搜索</button>
```

---

#### 2. JavaScript 实现
```javascript
function highlightKeyword() {
  const keyword = document.getElementById('searchInput').value.trim();
  if (!keyword) return;

const contentDiv = document.getElementById('content');
  const text = contentDiv.textContent || contentDiv.innerText;
  const regex = new RegExp(`(${keyword})`, 'gi'); // 'g' 表示全局匹配，'i' 表示不区分大小写

// 清除之前的高亮
  const highlightedText = text.replace(regex, '<span class="highlight">$1</span>');

// 替换内容
  contentDiv.innerHTML = highlightedText;
}
```

---

#### 3. CSS 样式（可选）
```css
.highlight {
  background-color: yellow;
  font-weight: bold;
}
```

---

### 🔍 注意事项：

- 如果内容中有 HTML 标签，直接替换 `innerHTML` 可能会破坏结构。可以考虑使用 `textContent` 获取纯文本，再替换为带有 `<span>` 的 HTML。
- 如果你希望保留原有的 HTML 结构，可以用 `DOMParser` 或者 `innerText` 来处理。
- 使用正则表达式时要注意转义字符（比如 `.`、`*` 等），如果用户输入的是特殊字符，建议做转义处理。

---

### ✅ 完整代码示例

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div id="content">
  这是一个示例文本，用来演示如何高亮搜索关键字。
</div>

const contentDiv = document.getElementById('content');
  const text = contentDiv.textContent || contentDiv.innerText;
  const regex = new RegExp(`(${keyword})`, 'gi');

// 清除之前的高亮
  const highlightedText = text.replace(regex, '<span class="highlight">$1</span>');

// 替换内容
  contentDiv.innerHTML = highlightedText;
}
</script>

</body>
</html>
```

---

如果你有更复杂的需求（例如在动态加载的内容中高亮、支持多个关键词、区分大小写等），也可以告诉我，我可以进一步优化。