javascript - 如何向包含黑名单单词的元素添加类

我想给包含黑名单单词之一的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还是有更有效的方法。

最佳答案

这是一种方法：

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。