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解决方案：

我在你的段落中添加了一个名为'test'的id，并创建了一个名为blue的样式。

...然后

    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>'))

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

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

3 个答案: