javascript - 如何将类应用于数组中段落标记中的所有单词？

Question

假设我有一个段落定义为

<p>Here is a short paragraph of text which has repeating words. Words such <br>
as these will have a span around them which changes a property of words in a <br>
paragraph.
</p>

使用包含我想要应用此类的单词数组的脚本。

var blueWords = ["paragraph", "words", "which", "a"];

如何遍历段落中的每个项目并附加一个

<span color="blue"></span>

围绕 blueWords 数组中的那些预定义单词？这在 jQuery 中可能很容易完成，但我不确定如何去做。

Answer 1

这是一个非 jQuery 解决方案：

我在您的段落中添加了一个名为“测试”的 ID，并创建了一个名为蓝色的样式。

然后...

    var ParagraphText = document.getElementById('test').innerHTML;
    var blueWords = ["paragraph", "words", "which", "a"];

    function MakeWordsBlue(ParagraphText, blueWords) {
        var i = 0;
        for (i = 0; i < blueWords.length; i++) {
            ParagraphText = ParagraphText.replace(blueWords[i], '<span class="blue">' + blueWords[i] + '</span>')    
        };
        document.getElementById('test').innerHTML = ParagraphText;
    };

    MakeWordsBlue(ParagraphText, blueWords);

</script>

Answer 2

我更喜欢 RegExp 的答案。但是，一个循环也会这样做：

var blueWords = ["paragraph", "words", "which", "a"],
text = $('#mytext').text().split(' '),
outputStr = "";

for(i=0;i<text.length;i++) {
    if (blueWords.indexOf(text[i]) >= 0) {
        outputStr += '<span class="blue">' + text[i] + '</span> ';
    }
    else outputStr += text[i] + ' ';
}

$('#mytext').html(outputStr);

( http://jsfiddle.net/ajK7B/ )

Answer 3

你可以试试这段代码：

$('p').html($('p').html().replace(/(\sparagraph\s|\swords\s|\swhich\s|\sa\s)/ig, '<span style="color: blue">$1</span>'))

它使用正则表达式的替换方法。正则表达式是一种在字符串中进行搜索的强大方法。