Добавить класс в элемент в DOM на основе содержимого

Question

*** EDIT - проблема, похоже, в том, что я пытаюсь добавить класс (я попытался изменить некоторый CSS для тестируемого класса, т сделать что-нибудь)

Я хочу, чтобы найти элемент в DOM на основе текста, а также добавить класс к нему, так что я могу манипулировать его/ее родительские элементы

Это функция, которую я написал, чтобы сделать это (до этого я использую function из stackoverflow, чтобы пройти через 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 поста -

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() функции и протестировал его на этой странице. Он заменяет текст и добавляет класс фильтра в узлы с замененным текстом. Это решение использует classList.add('filter'), который не поддерживается в IE9 и ранее, но это не проблема, поскольку этот код предназначен для расширения 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; 
}