javascript 查找高亮显示字段

封面图 • 2025-11-07 • JavaScript

在 JavaScript 中查找并高亮显示某个字段（比如在字符串、HTML 内容或 DOM 元素中）通常涉及以下几种方式：

---

## ✅ 1. 在 **字符串** 中查找并高亮

如果你有一个字符串，想查找某个关键词并高亮显示（比如用 `<mark>` 标签），可以这样做：

```javascript
function highlightText(text, keyword) {
    const regex = new RegExp(`(${keyword})`, 'gi');
    return text.replace(regex, '<mark>$1</mark>');
}

// 示例
const originalText = "JavaScript 是一种广泛使用的编程语言。";
const highlighted = highlightText(originalText, "JavaScript");
console.log(highlighted);
// 输出: "<mark>JavaScript</mark> 是一种广泛使用的编程语言。"
```

> ⚠️ 注意：如果内容是 HTML，不要直接插入到 `innerHTML` 中，避免 XSS 攻击。

---

## ✅ 2. 在 **HTML 元素** 中查找并高亮

如果你想在网页上高亮某个元素的内容（比如一个 `<div>` 或 `<p>`），可以用如下方法：

### 示例：高亮某个类名的文本

```html
<div id="content">JavaScript 是一种广泛使用的编程语言。</div>
```

```javascript
function highlightKeywordInElement(element, keyword) {
    const text = element.textContent;
    const regex = new RegExp(`(${keyword})`, 'gi');
    const highlightedText = text.replace(regex, '<mark>$1</mark>');
    element.innerHTML = highlightedText;
}

// 调用
const contentDiv = document.getElementById('content');
highlightKeywordInElement(contentDiv, 'JavaScript');
```

> ✅ 这会把 `JavaScript` 高亮为 `<mark>JavaScript</mark>`。

---

## ✅ 3. 高亮多个匹配项（支持正则）

```javascript
function highlightMultiple(text, keywords) {
    let result = text;
    keywords.forEach(keyword => {
        const regex = new RegExp(`(${keyword})`, 'gi');
        result = result.replace(regex, '<mark>$1</mark>');
    });
    return result;
}
```

---

## ✅ 4. 使用第三方库（如 `mark.js`）

如果你需要更高级的功能（如高亮多个词、忽略大小写、高亮性能优化等），可以使用 [mark.js](https://markjs.io/)

### 安装（通过 npm）：
```bash
npm install mark.js
```

### 使用示例：

```javascript
import Mark from 'mark.js';

const mark = new Mark(document.getElementById('content'));
mark.mark('JavaScript', {
    className: 'highlight',
    separateWords: false,
    accuracy: 'part'
});
```

---

## ✅ 5. 高亮搜索框输入内容（实时搜索）

```html
<input type="text" id="searchInput" placeholder="输入要查找的内容">
<div id="content">JavaScript 是一种广泛使用的编程语言。</div>
```

```javascript
document.getElementById('searchInput').addEventListener('input', function () {
    const keyword = this.value.trim();
    const content = document.getElementById('content');
    const text = content.textContent;

if (keyword === '') {
        content.innerHTML = text; // 清除高亮
        return;
    }

const regex = new RegExp(`(${keyword})`, 'gi');
    content.innerHTML = text.replace(regex, '<mark>$1</mark>');
});
```

---

## ✅ 总结

| 场景 | 方法 |
|------|------|
| 字符串中高亮 | `str.replace(regex, '<mark>$1</mark>')` |
| HTML 元素中高亮 | 修改 `innerHTML` |
| 多个关键词 | 循环替换 |
| 更多功能 | 使用 `mark.js` 等库 |

---

如果你有具体场景（比如在某个 DOM 元素、JSON 字段、或者富文本中查找高亮），欢迎提供更多信息，我可以帮你定制代码！