javascript - 如果元素包含任何这些单词，则将该单词包装在 span 中

Question

如果在标题中找到某些单词，我想通过将这些单词包装在 span 类中来突出显示这些单词。有没有办法编写要检查的单词列表，然后使用相同的命令用 span 类包装这些单词中的任何一个？

例如:

<h1>This title contains the word Balloon</h1>
<h1>This title contains the word Oranges</h1>
<h1>This title doesn't contain either of those terms</h1>

检查这三个元素中的每一个(但会有 20 个左右)是否有“Balloon”或“Oranges”一词，然后用跨度颜色将这些词包裹起来。

我可以使用:

$('h1').html($('h1').html().replace(/(balloon)/g,'<span class="red">balloon</span>'));

但我必须为每个单词编写该查询，而如果可能的话，我想要更简单的东西。

Answer 1

您可以保留一个单词数组，然后迭代并替换每个标题中的单词

var words = [
    "balloon",
    "either"
];

$('h1').html(function(_,html) {
    var reg = new RegExp('('+words.join('|')+')','gi');
    return html.replace(reg, '<span class="red">$1</span>', html)
});

.red {color : red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>This title contains the word Balloon</h1>
<h1>This title contains the word Oranges</h1>
<h1>This title doesn't contain either of those terms</h1>