Question

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

我想要一个功能来查看Tag是否在HTML内。例如，我的作者键入The new Nike Store is open now，我将需要Nike作为标签。可以是某个类的跨度。

完成此操作的最佳方法是什么？我想在发布之前进行检查，因为不需要实时检测。

我目前的解决方案：

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

Answer 1

假设作者只输入纯文本，则可以使用正则表达式搜索标记词（或短语），并用该短语替换HTML中的短语，并用新类将self.protocol?.showMatches(match: match, banner: banner)括起来：

span

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;

（如果标签可以在正则表达式中包含特殊含义的字符，请先escape个标签，然后再传递给.tag { background-color: yellow; }）

遍历包含HTML的变量以检查特定单词

1 个答案: