Question

***编辑 - 这个问题似乎与我试图添加一个类的方式有关（我尝试更改一些CSS来进行测试，但它没有做任何事情）

我想在DOM中根据文本找到一个元素，并为其添加一个类，以便我可以操作它/它的父元素

这是我写的这个函数（在此之前我使用stackoverflow中的function来遍历DOM，并调用我的函数来替换匹配 - （实际的字符串值是现在不重要了） - 我修改的HTML是DOM。

var MATCH = ['word'];
var REPLACE = ['other'];


   function replaceText(textNode) {
    var badWord = textNode.nodeValue;
    var replaceWord = "";
    badWord.className = "filter";

    //Go through and match/replace strings equal to MATCH
    for (var i=0; i< MATCH.length; i++) {
        replaceWord = document.getElementsByClassName("filter").innerHTML;
        replaceWord = replaceWord.replace(new RegExp('\\b' + MATCH[i] + '\\b', 'g'), REPLACE[i]);
    }
    textNode.nodeValue = replaceWord;
}

当我直接替换下面这个单词中的文本时它起作用 - 但我想从类中访问和修改，这样我就可以更改父元素/ css

//working version without adding class
function hide(textNode) {
    var badWord = textNode.nodeValue;

    //Go through and match/replace strings equal to MATCH
    for (var i=0; i< MATCH.length; i++) {
        badWord = badWord.replace(new RegExp('\\b' + MATCH[i] + '\\b', 'g'), REPLACE[i]);
    }
    textNode.nodeValue = badWord;
}

来自stackoverflow post的

函数 -

walk(document.body);

function walk(node) {

    var child, next;

    switch (node.nodeType) {
        case ELEMENT:  // Element
        case DOCUMENT:  // Document
        case DOCUMENT_FRAGMENT: // Document fragment
            child = node.firstChild;
            while (child) {
                next = child.nextSibling;
                walk(child);
                child = next;
            }
            break;

        case TEXT: // Text node
            replaceText(node);
            break;
    }
}

Answer 1

我更改了您的replaceText()功能并在此页面上进行了测试。它替换文本并在具有替换文本的节点上添加过滤器类。此解决方案使用IE9及更早版本不支持的classList.add('filter')，但这不是问题，因为此代码适用于Chrome扩展程序。

function replaceText(textNode) {
    var nodeValue = textNode.nodeValue;
    for (var i=0; i < MATCH.length; i++) {
        if(-1 != nodeValue.indexOf(MATCH[i])) {
            nodeValue = nodeValue.replace(new RegExp(MATCH[i], 'g'), REPLACE[i]);
            textNode.parentNode.classList.add('filter');
        }
    }
    textNode.nodeValue = nodeValue;
}

根据内容将类添加到DOM中的元素

1 个答案: