<span>）和结束标签（即 </span>）包装起来，但只有当这些单词实际是页面上“可见文本”时才进行包装，而不是在 HTML 属性（如链接的 title 标签或在 <script></script> 块内）中。使用正则表达式可靠地解析HTML太过复杂。
如果你想在客户端进行操作，你可以创建一个文档片段或未连接的DOM节点（两者都不会显示在任何地方），并用你的HTML字符串来初始化它，然后遍历生成的DOM树并处理文本节点。(或使用库来帮助你做到这一点，虽然实际上很简单。)
这里是一个DOM遍历示例。这个示例略微比你的问题简单，因为它只更新了文本，而没有向结构中添加新元素(将文本的一部分用标签包裹涉及到更新结构)，但它应该可以让你开始工作。最后注释需要更改的内容。
var html =
"<p>This is a test.</p>" +
"<form><input type='text' value='test value'></form>" +
"<p class='testing test'>Testing here too</p>";
var frag = document.createDocumentFragment();
var body = document.createElement('body');
var node, next;
// Turn the HTML string into a DOM tree
body.innerHTML = html;
// Walk the dom looking for the given text in text nodes
walk(body);
// Insert the result into the current document via a fragment
node = body.firstChild;
while (node) {
next = node.nextSibling;
frag.appendChild(node);
node = next;
}
document.body.appendChild(frag);
// Our walker function
function walk(node) {
var child, next;
switch (node.nodeType) {
case 1: // Element
case 9: // Document
case 11: // Document fragment
child = node.firstChild;
while (child) {
next = child.nextSibling;
walk(child);
child = next;
}
break;
case 3: // Text node
handleText(node);
break;
}
}
function handleText(textNode) {
textNode.nodeValue = textNode.nodeValue.replace(/test/gi, "TEST");
}
你需要修改的地方在于handleText函数中。具体来说，你需要：
nodeValue字符串中每个单词开头的索引。Node#splitText将文本节点分成最多三个文本节点（匹配文本之前的部分、匹配文本和匹配文本之后的部分）。document.createElement创建新的span元素（直接写 span = document.createElement('span')）。Node#insertBefore在第三个文本节点（包含匹配文本之后的文本）前插入新的span元素，如果你不需要创建第三个节点，因为你的匹配文本是在文本节点末尾，则将null作为refChild参数传递即可。Node#appendChild将第二个文本节点（包含匹配文本的那个）移动到span元素中。（无需先从其父级中删除，appendChild会为你完成。）T.J. Crowder 的回答 是正确的。我在代码方面进一步推进了一下：这里是一个在所有主要浏览器中都能正常工作的完整示例。我之前在 Stack Overflow 上发布过此代码的变体（例如这里和这里），并使其变得通用，因此我（或其他人）不必对其进行太多更改即可重用。
jsFiddle 示例：http://jsfiddle.net/7Vf5J/38/
代码：
// Reusable generic function
function surroundInElement(el, regex, surrounderCreateFunc) {
// script and style elements are left alone
if (!/^(script|style)$/.test(el.tagName)) {
var child = el.lastChild;
while (child) {
if (child.nodeType == 1) {
surroundInElement(child, regex, surrounderCreateFunc);
} else if (child.nodeType == 3) {
surroundMatchingText(child, regex, surrounderCreateFunc);
}
child = child.previousSibling;
}
}
}
// Reusable generic function
function surroundMatchingText(textNode, regex, surrounderCreateFunc) {
var parent = textNode.parentNode;
var result, surroundingNode, matchedTextNode, matchLength, matchedText;
while ( textNode && (result = regex.exec(textNode.data)) ) {
matchedTextNode = textNode.splitText(result.index);
matchedText = result[0];
matchLength = matchedText.length;
textNode = (matchedTextNode.length > matchLength) ?
matchedTextNode.splitText(matchLength) : null;
// Ensure searching starts at the beginning of the text node
regex.lastIndex = 0;
surroundingNode = surrounderCreateFunc(matchedTextNode.cloneNode(true));
parent.insertBefore(surroundingNode, matchedTextNode);
parent.removeChild(matchedTextNode);
}
}
// This function does the surrounding for every matched piece of text
// and can be customized to do what you like
function createSpan(matchedTextNode) {
var el = document.createElement("span");
el.style.color = "red";
el.appendChild(matchedTextNode);
return el;
}
// The main function
function wrapWords(container, words) {
// Replace the words one at a time to ensure "test2" gets matched
for (var i = 0, len = words.length; i < len; ++i) {
surroundInElement(container, new RegExp(words[i]), createSpan);
}
}
wrapWords(document.getElementById("container"), ["test2", "test"]);
new RegExp(words[i], "g") 改为 new RegExp(words[i], "gi")。 - Tim DowntextNode = ...行后面必须添加regex.lastIndex = 0;。 - dmitrychsurroundMatchingText()函数工作的方式。 - Tim Down