javascript - 用 SPAN 标签包围 HTML 文本中的单个单词？

Question

我需要用 SPAN 标记将 HTML 元素内的单个单词括起来。所以像这样:

Foo <span class="f1 b0">bar <b>baz</b> boo blah</span> lorem ipsum

应该变成这样:

<span>Foo</span> <span class="f1 b0"><span>bar</span> <b><span>baz</span></b>
<span>blah</span></span> <span>lorem</span> <span>ipsum</span>

原因是我希望能够使用“document.elementFromPoint(X, Y)”找出光标下的具体单词。我尝试使用一个简单的正则表达式:

theElement.innerHTML.replace(/\b(\w+)\b/g, "<span>$1</span>")

...但这行不通，因为所讨论的 HTML 元素肯定会在其中包含元素。我只会在 innerText 而不是 innerHTML 上使用该正则表达式，但那样我就会丢失所有现有格式。

我尝试遍历元素的子元素，对每个子元素执行正则表达式替换，但有时子元素中有自己的 HTML 标记，我无法弄清楚如何替换之前或之后的文本标签。

谁有好的解决办法？

Answer 1

为此，您需要遍历 DOM 并了解如何处理各个节点。

基本的遍历代码是这样的:

function walk(root)
{
    if (root.nodeType == 3) // text node
    {
        doReplace(root);
        return;
    }
    var children = root.childNodes;
    for (var i = children.length - 1 ; i >= 0 ; i--)
    {
        walk(children[i]);
    }
}

walk 函数检查输入节点的所有子节点并:

• 如果它看到一个文本节点，它会调用替换函数
• 否则递归调用自身，将子节点作为新的输入节点。

请注意，由于代码就地替换了节点，因此“子”节点列表将受到替换的影响。为了避免这影响算法，以相反的顺序访问 child 。

doReplace函数是这样的:

function doReplace(text)
{
    var div = document.createElement("div");
    div.innerHTML = text.nodeValue.replace(/\b(\w+)\b/g, "<span>$1</span>");
    var parent = text.parentNode;
    var children = div.childNodes;
    for (var i = children.length - 1 ; i >= 0 ; i--)
    {
        parent.insertBefore(children[i], text.nextSibling);
    }
    parent.removeChild(text);
}

这将创建一个容器节点，然后应用正则表达式并使用 innerHTML 将结果解析为 DOM 片段。 div 元素的子元素可以替换文档中的文本节点。同样，节点的移动以相反的顺序进行，因此源节点列表的变化不会影响循环。

最后，可以通过调用 walk 函数来应用更改。

例如

window.onload = function() { walk(document.body); };

可以在 http://www.alohci.net/text/html/wordwrapper.htm.ashx 找到完整的工作示例