javascript - 通过包含 HTML 的变量来检查特定单词

Question

我正在使用 Quill Editor，它基本上是一个类似于 SO 中的框，您可以在其中输入文本并输出 HTML。 我将该 HTML 存储在一个变量中。现在我的网站有一个品牌和类别的标签(某些关键字)列表。

我想要一个功能来查看标签是否在该 HTML 中。 例如，我的作者输入 The new Nike Store is open now 我需要将 Nike 作为标签。它可以是具有特定类的跨度。

实现这一目标的最佳方法是什么？我想在发布之前进行检查，因为不需要活体检测。

我现在的解决方案:

我还没有实现它，但我想我会尝试检查标签列表中的每个单词，然后再转到下一个单词并将其包装在所需的 HTML 标签中(如果该单词是标签)。但这可能会使代码变得困惑，因为所有其他内容(例如通过编辑器生成的其他 HTML 标签)。

Answer 1

假设作者只输入纯文本，您可以使用正则表达式来搜索标签词(或短语)，并将 HTML 中的短语替换为该短语，并用 span 括起来你的新类(class):

const input = 'The new Nike Store is open now';
const htmlStr = input.replace(/\bnike\b/gi, `<span class="tag">$&</span>`);
document.body.appendChild(document.createElement('div')).innerHTML = htmlStr;

.tag {
  background-color: yellow;
}

或者，对于动态标签，动态创建模式:

const input = 'The new Nike Store is open now';
const tags = ['nike', 'open'];
const pattern = new RegExp(tags.join('|'), 'gi');
const htmlStr = input.replace(pattern, `<span class="tag">$&</span>`);
document.body.appendChild(document.createElement('div')).innerHTML = htmlStr;

.tag {
  background-color: yellow;
}

(如果标签可以包含正则表达式中具有特殊含义的字符，escape 首先在传递给 new RegExp 之前使用它们)