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的“：contains”选择器，但是我遇到了同样的问题，因为我不知道字符串的容器是预先将它添加到选择器的。

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

P.S。如果这样的事情已经得到解答我就找不到了......

Answer 1

实际上这是一个非常复杂的问题（你可以阅读this detailed blog post）你需要：

在dom树上递言
查找所有文本节点
对其数据进行替换
将修改后的数据转换为dom节点
在原始文本节点
删除原始文本节点

这是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>");
}

使用Javascript围绕字符串的多个实例包装标记

1 个答案: