javascript - 使用 Javascript 在字符串的多个实例周围包装标签

Question

我正在尝试使用纯 JS 将在 html 中找到的字符串的多个实例包装在标签(span 或 abbr)周围。我找到了一种使用代码来做到这一点的方法:

function wrapString() {
    document.body.innerHTML = document.body.innerHTML.replace(/string/g, ‘<tag>string</tag>');
};

但使用此代码会混淆链接的 href 或输入的值，因此我想排除某些标签(A、INPUT、TEXTAREA 等)。

我试过这个:

function wrapString() {
    var allElements = document.getElementsByTagName('*');
    for (var i=0;i<allElements.length;i++){
        if (allElements[i].tagName != "SCRIPT" && allElements[i].tagName != "A" && allElements[i].tagName != "INPUT" && allElements[i].tagName != "TEXTAREA") {
            allElements[i].innerHTML = allElements[i].innerHTML.replace(/string/g, ‘<span>string</span>');
        }
    }
}

但它没有工作，因为它获取了包含我的字符串的所有元素(HTML、BODY、父 DIV 等)，而且它一直在破坏我的浏览器。我什至尝试使用 JQuery 的“:containing”选择器，但我遇到了同样的问题，因为我事先不知道字符串的容器是什么，无法将其添加到选择器。

我想使用纯 JavaScript 来做到这一点，因为我计划将它用作快速访问任何站点的书签，但我也欢迎所有关于 JQuery 和其他框架的答案。

附言如果已经回答了类似的问题，我找不到它...

Answer 1

这实际上是一个相当复杂的问题(你可以阅读this detailed blog post)。
你需要:

1. 在 dom 树上递归
2. 找到所有文本节点
3. 对其数据进行替换
4. 将修改后的数据做成dom节点
5. 将dom节点插入到树中，在原始文本节点之前
6. 去除原文节点

这是一个demo fiddle .
如果您仍然需要基于 tagName 的排除项，请查看 this fiddle

代码:

function wrapInElement(element, replaceFrom, replaceTo) {
    var index, textData, wrapData, tempDiv;
    // recursion for the child nodes
    if (element.childNodes.length > 0) {            
        for (index = 0; index < element.childNodes.length; index++) {
            wrapInElement(element.childNodes[index], replaceFrom, replaceTo);
        }
    }
    // non empty text node?
    if (element.nodeType == Node.TEXT_NODE && /\S/.test(element.data)) {
        // replace
        textData = element.data;
        wrapData = textData.replace(replaceFrom, replaceTo);
        if (wrapData !== textData) {
            // create a div            
            tempDiv = document.createElement('div'); 
            tempDiv.innerHTML = wrapData;
            // insert
            while (tempDiv.firstChild) {
                element.parentNode.insertBefore(tempDiv.firstChild, element);
            }
            // remove text node
            element.parentNode.removeChild(element);
        }
    }
}

function wrapthis() {
    var body = document.getElementsByTagName('body')[0];
    wrapInElement(body, "this", "<span class='wrap'>this</span>");
}