本文深入探讨了一个纯JavaScript文本高亮功能在处理多词匹配时出现的错误。通过分析 `indexOf` 的局限性以及 `split` 方法与正则表达式捕获组的结合使用，文章提供了一种健壮的解决方案。核心在于利用捕获组确保 `split` 方法返回的数组中包含匹配项，从而实现对文本片段的精确识别和高亮，避免了替换错误并提升了代码的可靠性。
1. 概述
在前端开发中，文本高亮是一个常见需求，例如在搜索结果中突出显示关键词。本教程将分析一个基于 HTMLElement.prototype 扩展的纯JavaScript文本高亮函数 realcar。该函数旨在实现无框架、大小写不敏感、并能处理HTML标签内文本的高亮功能。然而，在处理连续多个搜索词时，该函数存在一个关键缺陷，导致第二个搜索词被错误地替换。
2. 原始实现与问题分析
原始的 realcar 函数通过遍历DOM节点，识别文本节点并使用正则表达式 split 方法分割文本，然后将匹配到的词语包裹在自定义的 hightx 标签中。以下是其核心逻辑的简化代码片段：
HTMLElement.prototype.realcar = function(word) {
var el = this;
const wordss = word.trim().sanitiza().split(" ").filter(word1 => word1.length > 2);
const expr = new RegExp(wordss.join('|'), 'ig');
// RegExpUNICO 用于累积所有匹配到的词语，最终构建用于split的正则表达式
const RegExpUNICO = [...wordss]; // 初始包含搜索词
const nodes = Array.from(el.childNodes);
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
if (node.nodeType === 3) { // 文本节点
const nodeValue = node.nodeValue;
let matches = [];
// 首次匹配，填充matches和RegExpUNICO
while ((match = expr.exec((nodeValue).sanitiza())) !== null) {
matches.push(match[0]);
const palavrar = nodeValue.substring(match.index, match.index + match[0].length);
RegExpUNICO.push(palavrar); // 将实际匹配到的词语也加入RegExpUNICO
}
// 构建用于split的正则表达式
let expr0 = new RegExp(RegExpUNICO.join('|'), 'ig');
if (matches) { // 问题点1: 即使matches为空数组，也为真
const parts = nodeValue.split(expr0);
for (let n = 0; n < parts.length; n++) {
if (n) { // 处理匹配到的部分
const xx = document.createElement("hightx");
xx.style.border = '1px solid blue';
xx.style.backgroundColor = '#ffea80';
// 问题点2: 依赖indexOf定位，可能导致错误
const startIndex = nodeValue.indexOf(parts[n - 1]) + parts[n - 1].length;
const palavra = node.nodeValue.substr(startIndex, matches[n - 1].length);
xx.appendChild(document.createTextNode(palavra));
el.insertBefore(xx, node);
}
if (parts[n]) { // 处理非匹配部分
el.insertBefore(document.createTextNode(parts[n]), node);
}
}
el.removeChild(node); // 移除原始文本节点
}
} else {
node.realcar(word); // 递归处理子节点
}
}
}该实现存在两个主要问题：
立即学习“Java免费学习笔记（深入）”；
- 错误的条件判断： if (matches) 语句即使在 matches 数组为空时也会被评估为 true，因为空数组在JavaScript中是一个真值。正确的判断应是 if (matches.length)。
- 不精确的词语定位： 在创建高亮元素时，代码使用 const startIndex = nodeValue.indexOf(parts[n - 1]) + parts[n - 1].length; 来确定高亮词语的起始位置。这种方法的问题在于，parts[n - 1] 可能是一个非唯一的子字符串（例如一个空格或一个常见词语），如果该子字符串在 nodeValue 中出现多次，indexOf 将始终返回第一个匹配项的索引，从而导致高亮的词语与实际搜索的词语不符。特别是在搜索连续词语时，这种不精确性会导致第二个词语被错误地识别和替换。
3. 优化策略：引入正则表达式捕获组
为了解决上述问题，尤其是精确词语定位的难题，核心策略是利用正则表达式的捕获组（Capture Group）与 String.prototype.split() 方法结合使用。
当 split() 方法的参数是一个正则表达式，并且该正则表达式包含捕获组时，匹配到的分隔符（即捕获组捕获的内容）也会被包含在返回的数组中。这使得我们能够遍历整个字符串，同时获取未匹配的部分和匹配到的分隔符（即我们要高亮的词语）。
具体修正步骤：
- 修正条件判断： 将 if (matches) 改为 if (matches.length)，确保只有当找到匹配项时才执行后续的高亮逻辑。
-
创建带捕获组的正则表达式： 在构建用于 split 的正则表达式 expr0 时，将 RegExpUNICO.join('|') 用括号 () 包裹起来，使其成为一个捕获组。
const expr00 = "(" + RegExpUNICO.join('|') + ")"; // 添加括号创建捕获组 const expr0 = new RegExp(expr00, 'ig'); -
解析 split 结果： 经过捕获组处理后，nodeValue.split(expr0) 返回的 parts 数组将包含以下结构：
- parts[0]：第一个非匹配字符串
- parts[1]：第一个匹配到的字符串（捕获组内容）
- parts[2]：第二个非匹配字符串
- parts[3]：第二个匹配到的字符串
- ...以此类推。 也就是说，数组中奇数索引的元素将是匹配到的词语，而偶数索引的元素将是非匹配的文本片段。
4. 优化后的代码实现
以下是修正后的 realcar 函数中关键的 if (matches.length) 块的代码：
if (matches.length) { // 修正1: 确保有匹配项才执行
// 将expr0的创建移至此处，并添加捕获组
// RegExpUNICO 此时应已包含所有需要高亮的词语
const expr00 = "(" + RegExpUNICO.join('|') + ")"; // 修正2: 添加括号创建捕获组
const expr0 = new RegExp(expr00, 'ig');
const parts = nodeValue.split(expr0); // 修正3: split结果包含匹配项
for (let n = 0; n < parts.length; n++) {
const textNode = document.createTextNode(parts[n]);
if (n % 2) { // 修正4: 奇数索引为匹配项，需要高亮
const xx = document.createElement("hightx");
xx.style.border = '1px solid blue';
xx.style.backgroundColor = '#ffea80';
// 修正5: 直接使用parts[n]作为高亮文本，无需复杂定位
xx.appendChild(textNode);
el.insertBefore(xx, node);
} else if (parts[n]) { // 偶数索引为非匹配项 (且非空)，直接插入
el.insertBefore(textNode, node);
}
}
el.removeChild(node); // 移除原始文本节点
}通过这些修改，我们不再需要依赖 indexOf 来猜测高亮词语的位置和长度，而是直接从 split 方法返回的 parts 数组中精确地获取每一个文本片段，无论是需要高亮的词语还是
