JavaScript 文本搜索全攻略：从基础方法到正则表达式与DOM查找96

嗨，各位前端开发者们！欢迎来到我的知识小站。在日常的Web开发中，我们常常需要与各种文本打交道：验证用户输入、在长篇文章中查找关键词、实现搜索功能高亮、解析数据等等。文本搜索是这些场景的核心，而JavaScript作为前端的核心语言，提供了多种强大且灵活的方法来完成这项任务。今天，我们就来深入探讨JavaScript中如何高效、精准地进行文本搜索，从字符串基础方法到强大的正则表达式，再到DOM元素的查找与操作，助你成为文本处理的大师！

一、字符串基础搜索方法：快速定位与判断

首先，我们从JavaScript内置的字符串方法开始。它们简单直观，适用于大多数基本的文本查找需求。

1. `indexOf()` 与 `lastIndexOf()`：精确索引定位

`indexOf()` 方法用于查找指定子字符串在字符串中第一次出现的位置。如果找到，返回该子字符串的起始索引；如果没有找到，则返回 -1。const sentence = "JavaScript 是一种强大的编程语言，JavaScript 学习起来很有趣。";
const searchWord = "JavaScript";
const searchWordNotFound = "Python";
((searchWord)); // 输出: 0
((searchWord, 1)); // 从索引1开始查找，输出: 16 (第二次出现的位置)
((searchWordNotFound)); // 输出: -1

`lastIndexOf()` 则与 `indexOf()` 相反，它从字符串的末尾开始向前查找，返回指定子字符串最后一次出现的位置。const sentence = "JavaScript 是一种强大的编程语言，JavaScript 学习起来很有趣。";
const searchWord = "JavaScript";
((searchWord)); // 输出: 16

需要注意的是，`indexOf()` 和 `lastIndexOf()` 都是区分大小写的。

2. `includes()`：是否存在判断

如果你只需要判断一个字符串中是否包含另一个子字符串，而不需要知道它的具体位置，那么 `includes()` 方法是最简洁的选择。它返回一个布尔值（`true` 或 `false`）。const text = "Hello World";
(("World")); // 输出: true
(("world")); // 输出: false (区分大小写)
(("llo", 1)); // 从索引1开始查找，输出: true

`includes()` 也区分大小写。

3. `startsWith()` 与 `endsWith()`：头部与尾部匹配

这两个方法顾名思义，用于判断字符串是否以指定子字符串开头或结尾。它们也返回布尔值。const url = "/path";
(("")); // 输出: true
(("")); // 输出: false
const filename = "";
((".pdf")); // 输出: true
((".docx")); // 输出: false

同样，它们也是区分大小写的。

4. `search()`：首次引入正则表达式的字符串方法

`search()` 方法的行为类似于 `indexOf()`，但它的强大之处在于可以接受正则表达式作为参数。它返回匹配的第一个子字符串的起始索引，如果没有找到则返回 -1。const poem = "明月几时有？把酒问青天。不知天上宫阙，今夕是何年？";
// 查找包含“天”或“月”的第一个位置
((/天|月/)); // 输出: 1 (明月中的“月”字)
// 不区分大小写查找 "javascript"
const code = "I love JavaScript.";
((/javascript/i)); // 输出: 7

`search()` 方法的出现，为我们引入了更强大的文本搜索工具——正则表达式。

二、正则表达式：文本搜索的瑞士军刀

正则表达式（Regular Expression，简称 RegEx 或 RegExp）是 JavaScript 中进行模式匹配的利器。它们提供了一种声明式的方式来描述复杂的字符串模式，从而实现高度灵活和强大的文本搜索、替换和验证功能。

1. 正则表达式的创建与基础语法

在 JavaScript 中，正则表达式可以通过两种方式创建：
字面量形式： `/pattern/flags` (推荐，性能更优)
构造函数形式： `new RegExp("pattern", "flags")` (当模式或标志需要动态生成时使用)

const regexLiteral = /apple/i; // 匹配 "apple"，不区分大小写
const regexConstructor = new RegExp("banana", "g"); // 全局匹配 "banana"

常用的标志（Flags）：
`i` (ignore case)：不区分大小写匹配。
`g` (global)：全局匹配，查找所有匹配项，而不是在找到第一个后停止。
`m` (multiline)：多行匹配，使 `^` 和 `$` 匹配每行的开头和结尾，而不仅仅是整个字符串的开头和结尾。

常用元字符与字符类：
`.`：匹配除换行符以外的任何单个字符。
`\d`：匹配任何数字字符 (0-9)。
`\D`：匹配任何非数字字符。
`\w`：匹配任何单词字符 (字母、数字、下划线)。
`\W`：匹配任何非单词字符。
`\s`：匹配任何空白字符 (空格、制表符、换行符等)。
`\S`：匹配任何非空白字符。
`^`：匹配字符串的开头（或行的开头，如果设置了 `m` 标志）。
`$`：匹配字符串的结尾（或行的结尾，如果设置了 `m` 标志）。
`[]`：字符集，匹配方括号中的任何一个字符，如 `[aeiou]` 匹配任何元音字母。
`[^]`：否定字符集，匹配不在方括号中的任何一个字符，如 `[^0-9]` 匹配任何非数字字符。
`()`：捕获组，将多个字符作为一个单元处理，并可以提取匹配的子字符串。

常用量词：
`*`：匹配前一个元素零次或多次。
`+`：匹配前一个元素一次或多次。
`?`：匹配前一个元素零次或一次。
`{n}`：匹配前一个元素恰好 `n` 次。
`{n,}`：匹配前一个元素至少 `n` 次。
`{n,m}`：匹配前一个元素至少 `n` 次，但不超过 `m` 次。

2. `match()`：获取所有匹配结果

`match()` 方法可能是正则表达式最常用的方法之一。它返回一个数组，包含所有匹配的结果。如果没有匹配到，则返回 `null`。const text = "Color color colourful world!";
// 不带 'g' 标志，只返回第一个匹配
((/color/i));
// 输出: ["Color", index: 0, input: "Color color colourful world!", groups: undefined]
// 带 'g' 标志，全局匹配所有
((/color/gi));
// 输出: ["Color", "color", "colourful"]
const htmlTags = "<p>This is a <b>paragraph</b>.</p>";
// 查找所有 HTML 标签
((/<[^>]+>/g));
// 输出: ["<p>", "<b>", "</b>", "</p>"]

当不使用 `g` 标志时，`match()` 返回的数组除了匹配的字符串本身，还会包含 `index`（匹配的起始位置）、`input`（原始字符串）以及 `groups`（命名捕获组的匹配结果，如果有的话）。

3. `matchAll()` (ES2020+)：迭代器形式的全局匹配

`matchAll()` 返回一个迭代器，其中包含原始字符串中所有匹配正则表达式的完整信息（包括捕获组）。它总是需要 `g` 标志。const sentence = "I have 2 apples and 3 bananas.";
const regex = /\d+\s(\w+)/g; // 匹配数字、空格和单词
for (const match of (regex)) {
(`完整匹配: ${match[0]}, 数量: ${match[0].split(' ')[0]}, 水果: ${match[1]}, 索引: ${}`);
// 输出:
// 完整匹配: 2 apples, 数量: 2, 水果: apples, 索引: 7
// 完整匹配: 3 bananas, 数量: 3, 水果: bananas, 索引: 19
}

`matchAll()` 在需要详细处理每个匹配项的捕获组信息时非常有用。

4. `test()`：快速验证模式是否存在

`()` 方法返回一个布尔值，表示字符串是否符合正则表达式的模式。这是进行验证最常用的方法。const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
(("test@")); // 输出: true
(("invalid-email")); // 输出: false
const phoneRegex = /^1[3-9]\d{9}$/; // 简单的中国手机号校验
(("13812345678")); // 输出: true
(("23812345678")); // 输出: false

5. `exec()`：循环获取详细匹配信息

`()` 方法在一个指定字符串中执行一个搜索匹配。它返回一个数组，包含匹配的字符串、捕获组，以及 `index` 和 `input` 属性。如果未找到匹配，则返回 `null`。

`exec()` 最独特的特性是，当正则表达式带有 `g` 标志时，每次调用 `exec()` 都会从正则表达式的 `lastIndex` 属性指示的位置开始搜索，并更新 `lastIndex`。这使得我们可以在循环中迭代地获取所有匹配项。const logText = "Error: Invalid input. Warning: File not found. Error: Disk full.";
const errorRegex = /(Error|Warning): ([^.]+)/g; // 捕获错误类型和内容
let match;
while ((match = (logText)) !== null) {
(`类型: ${match[1]}, 内容: ${match[2]}, 匹配索引: ${}`);
// 输出:
// 类型: Error, 内容: Invalid input, 匹配索引: 0
// 类型: Warning, 内容: File not found, 匹配索引: 20
// 类型: Error, 内容: Disk full, 匹配索引: 48
}

`exec()` 非常适合在需要对每个匹配项进行复杂处理，或者需要提取捕获组内容时使用。

三、DOM 文本查找与高亮：在网页中“找到并突出”

仅仅在 JavaScript 字符串中查找文本是不够的，我们更常需要在网页的 HTML 结构中查找并操作文本。这通常涉及到 DOM（文档对象模型）操作。

1. 在特定DOM元素中查找文本

首先，我们需要获取到目标DOM元素的文本内容。常用的属性有 `textContent` 和 `innerText`。
`textContent`：获取元素及其所有子元素的文本内容，不会渲染CSS样式，返回所有节点文本，包括 `<script>` 和 `<style>` 元素的内容。
`innerText`：只返回用户可见的文本内容，会考虑CSS样式，例如 `display: none` 的元素内容不会被获取。

通常情况下，`textContent` 更适用于纯文本内容的提取。const articleElement = ('myArticle');
if (articleElement) {
const articleText = ;
const searchTerm = "JavaScript";
if ((searchTerm)) {
(`文章中包含关键词 "${searchTerm}"`);
} else {
(`文章中不包含关键词 "${searchTerm}"`);
}
// 使用正则表达式查找所有数字
const numbers = (/\d+/g);
if (numbers) {
("文章中的数字:", numbers);
}
}

2. 递归遍历DOM树查找文本节点

如果我们需要在整个页面或某个复杂结构中查找文本，并可能对匹配的文本进行精确操作（例如，只高亮文本而不是包裹整个父元素），那么就不能简单地获取 `textContent` 然后进行替换。因为那样会丢失DOM结构。我们需要遍历DOM树，找到文本节点（`Node.TEXT_NODE`），然后在这些文本节点中查找。function findTextNodes(element, searchTerm, regex, callback) {
(node => {
if ( === Node.TEXT_NODE) {
// 在文本节点中查找
if (()) {
callback(node, searchTerm);
}
} else if ( === Node.ELEMENT_NODE && !== 'SCRIPT' && !== 'STYLE') {
// 递归遍历子元素，跳过script和style标签
findTextNodes(node, searchTerm, regex, callback);
}
});
}
// 示例：查找并高亮页面中的某个词
function highlightText(rootElementId, searchTerm) {
const root = (rootElementId);
if (!root) return;
// 创建一个不区分大小写的全局正则表达式
const regex = new RegExp((/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'); // 记得转义特殊字符！
findTextNodes(root, searchTerm, regex, (textNode, term) => {
const parent = ;
if (!parent) return;
// 使用replaceChild和createDocumentFragment进行替换，避免多次DOM操作
const fragment = ();
let lastIndex = 0;
let match;
// 重置lastIndex，因为同一个regex可能被多次test/exec调用，导致lastIndex不一致
= 0;

while ((match = ()) !== null) {
// 添加匹配前的文本
if ( > lastIndex) {
(((lastIndex, )));
}
// 添加高亮文本
const span = ('mark'); // 或 span, 并添加 class
= match[0];
(span);
lastIndex = ;
}
// 添加匹配后的剩余文本
if (lastIndex < ) {
(((lastIndex)));
}
(fragment, textNode);
});
}
// 假设页面中有 id="content" 的 div
// highlightText('content', 'JavaScript');

上述 `highlightText` 函数通过遍历DOM树，精准地找到文本节点，并利用正则表达式的 `exec()` 方法和 `` 来高效地替换和高亮文本，同时保留了DOM结构。这是一个相对复杂的实现，但能达到精确高亮的效果。

3. 更简洁但有局限性的DOM文本高亮（`innerHTML` 替换）

对于结构简单或可以接受结构变化的场景，可以直接获取元素的 `innerHTML`，然后使用 `()` 方法配合正则表达式进行替换。function simpleHighlight(elementId, searchTerm) {
const element = (elementId);
if (element) {
// 构建不区分大小写的全局正则表达式，并转义搜索词中的特殊字符
const regex = new RegExp((/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');

// 替换 innerHTML。注意：这会重新解析元素的HTML内容，可能会丢失事件监听器。
= (regex, `${searchTerm}`);
}
}
// 假设页面中有 id="myParagraph" 的 p 标签
// simpleHighlight('myParagraph', '前端');

这种方法虽然简洁，但有几个潜在问题：

事件监听器丢失： 重新设置 `innerHTML` 会销毁并重建元素内部的DOM节点，导致之前附加到这些节点上的事件监听器全部丢失。
XSS 风险： 如果 `searchTerm` 来自用户输入，且没有进行适当的清理，可能会导致跨站脚本攻击 (XSS)。例如，如果 `searchTerm` 包含 `<script>` 标签。在上述代码中，我们只将 `searchTerm` 作为纯文本插入 `` 标签中，相对安全，但如果替换逻辑更复杂，需要额外注意。
性能开销： 对于大型、复杂的DOM结构，频繁修改 `innerHTML` 可能会带来性能问题。

因此，在选择高亮方案时，需要根据具体需求和场景权衡利弊。

四、实践建议与性能考量

掌握了这些方法后，为了更好地在实际项目中应用，还有一些实践建议：
区分大小写： 如果不需要区分大小写，记得在正则表达式中使用 `i` 标志，或在 `indexOf()` 前将字符串转换为统一大小写（如 `toLowerCase()`）。
转义特殊字符： 如果你的搜索词（特别是来自用户输入）中可能包含正则表达式的特殊字符（如 `.` `*` `+` `?` `(` `)` `[` `]` `\` `/` `^` `$` `|`），则在构建正则表达式时必须对其进行转义，例如：
const userInput = "C++?"; // 用户想搜索“C++?”
const escapedInput = (/[.*+?^${}()|[\]\\]/g, '\\$&'); // 转义后变为 "C\+\?"
const regex = new RegExp(escapedInput, 'g');
("C++? is a language".match(regex)); // 匹配到 "C++?"

性能优化：

对于简单的存在性判断，`includes()` 通常比 `indexOf()` 或正则表达式更高效。
对于大型文本或频繁的搜索操作，正则表达式的性能需要注意。避免过于复杂的正则表达式，可以考虑将其分解。
DOM操作是昂贵的。尽量减少直接的DOM操作，例如在进行多次DOM更新时，可以使用 `DocumentFragment` 来批量操作。
如果在一个大型字符串中进行大量重复搜索，且子字符串相对固定，可以考虑构建Trie树或使用KMP等字符串匹配算法（虽然JavaScript内置方法通常已足够优化）。

用户体验： 在实现搜索高亮时，考虑用户滚动、页面重排等场景，确保高亮效果稳定且不会引起性能问题。

JavaScript 提供了从简单的 `indexOf()` 到强大的正则表达式，再到复杂的DOM遍历与操作等一系列文本搜索工具。了解并熟练运用这些方法，能让你在处理各种前端文本需求时游刃有余。无论是简单的字符串匹配、复杂的模式识别，还是网页内容的动态查找与高亮，你都能找到最合适的解决方案。多加练习，灵活组合，你将成为一个真正的文本处理专家！

希望这篇全攻略能帮助你更游刃有余地在 JavaScript 世界中进行文本搜索！如果你有任何疑问或更好的实践，欢迎在评论区留言交流！

2025-11-07

上一篇：JavaScript深度探索：驾驭客户端生命周期与动态UI操作的CLMOV之道

下一篇：JavaScript 输入掩码：提升用户体验与数据准确性的秘密武器