如何將類添加到包含黑名單單詞的元素

Question

我想向包含黑名單單詞之一的HTML元素添加一個類。

例如，我的黑名單由「壞」和「醜陋」，我想補充類其跨度：

<div id="main"> 
    <span>This is good.</span> 
    <span class="black">Bad things happen sometimes.</span> 
    <span class="black">This is bad.</span> 
    <span class="black">And this is ugly.</span> 
</div> 

<a onclick="blacklisterFunction();">Add Class</a> 

如何blacklisterFunction（）應該是什麼樣子？該函數是否應該爲每個黑名單單詞抓取主div，或者是否有更有效的方法。

Answer 1

這裏有一個辦法：

function blacklister(el, words) { 
    if (!el || !words) { 
     return false; 
    } 
    else { 
     var text = el.textContent; 
     for (var i = 0, len = words.length; i < len; i++) { 
      if (text.test(new RegExp(words[i],'gi'))) { 
       el.className += 'black'; 
      } 
     } 
    } 
} 

var m = document.getElementById('main'), 
    spans = m.getElementsByTagName('span'), 
    blacklist = ['ugly','bad']; 

for (var i = 0, len = spans.length; i < len; i++) { 
    blacklister(spans[i],blacklist); 
}​ 

JS Fiddle demo。

---

編輯響應評論通過OP左，下，使用上述在Firefox報告錯誤：

>

function blacklister(el, words) { 
    if (!el || !words) { 
     return false; 
    } 
    else { 
     var text = el.textContent; 
     for (var i = 0, len = words.length; i < len; i++) { 
      if (text.match(new RegExp(words[i],'gi'))) { 
       if (el.className.indexOf('black') == -1){ 
        el.className += 'black'; 
       } 
      } 
     } 
    } 
} 

var m = document.getElementById('main'), 
    spans = m.getElementsByTagName('span'), 
    blacklist = ['ugly','bad']; 

for (var i = 0, len = spans.length; i < len; i++) { 
    blacklister(spans[i],blacklist); 
}​ 

JS Fiddle demo。

參考文獻：

• getElementsByTagName()。
• match()。
• RegExp()。
• test()。
• textContent。

Answer 2

使用jQuery：

$('#clickme').click(function() { 

    $('div span').each(function() { 

     var badthings = ['bad', 'ugly', 'gross']; 

     var x = 0; 

     while (x <= (badthings.length - 1)) { 

      if ($(this).text().toLowerCase().search(badthings[x]) !== -1) { 

       $(this).addClass('black'); 

      } 

      x++; 

     } 

    }); 

}); 

的jsfiddle：http://jsfiddle.net/DgpnQ/4/