javascript - 在跨度中包装变量词

Question

基于各种用户输入，我们将一组单词放入隐藏的 div (#words) 中，然后使用该信息执行功能。

我想做的是检查 div 中的现有单词，即：

terms = $("#words").html();

然后，在页面其他位置的可见且单独的 div (.ocrText) 中，仅将这些单词包装在强标记中。

$('.ocrText').each(function() {
  $(this).html($(this).html().replace(/term/g, "<strong>term</strong>"));
});

所以，如果他们搜索“Tallant France”并且我们存储了它，那么下面的句子：

“马克·塔兰特在法国服役。”

会成为：

“马克·<strong>塔兰特</strong>曾任职<strong>France</strong>。”

但我不知道如何将该变量注入 .replace()

///

编辑：这些术语以这种格式插入到#words div中：["Tallant","France","War"] ...等等。

Answer 1

假设您的单词仅包含字母数字字符，您可以构造一个正则表达式来一次搜索所有这些字符，如下所示：

html = html.replace (
  new RegExp(terms.split(/\s*,\s*|\s+/).join('|'), 'g'), '<strong>$&</strong>');

拆分应该将术语字符串转换为包含单个单词的数组，在示例中，我将其编码为以逗号分隔，可选地由空格或空格包围。

Answer 2

$('.ocrText').each(function() {
    var term = 'term'
    var pattern = RegExp(term, 'g')
    $(this).html($(this).html().replace(pattern, "<strong>" + term + "</strong>"));
});