0

我想向包含黑名单单词之一的 HTML 元素添加一个类。

例如，我的黑名单由“bad”和“ugly”组成，我想在它们的 span 中添加类：

<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 或者是否有更有效的方法。

4

2 回答 2

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/

于 2012-05-30T20:38:52.230 回答
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 小提琴演示。

为响应 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 小提琴演示。

参考：

于 2012-05-30T20:41:32.367 回答