遍历包含HTML的变量以检查特定单词
提问于 2018-11-29 06:32:44
我使用的是Quill Editor，它基本上是一个类似于中的Box，您可以在其中输入文本并取出HTML。我将该HTML存储在一个变量中。现在我的网站有一个标签列表(某些关键字)的品牌和类别。
我想要一个功能，看看是否有一个标签在该HTML内。例如，我的作者输入我需要The new Nike Store is open now Nike作为标记。它可以是某个类的跨度。
实现这一目标的最佳方法是什么？我想在发布之前进行检查，因为不需要实时检测。
我现在的解决方案是：
我还没有实现它，但我想我会尝试检查我的标记列表中的每个单词，然后转到下一个并将其包装在所需的HTML标记中(如果该单词是一个标记)。但这可能会使代码变得混乱，因为所有其他东西，如通过编辑器生成的其他HTML标记。
回答 1
Stack Overflow用户
发布于 2018-11-29 06:36:18
假设作者只输入纯文本，您可以使用正则表达式搜索标记词(或短语)，并将HTML中的短语替换为包含在新类的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;.tag {
background-color: yellow;
}
(如果标签可以包含正则表达式中具有特殊含义的字符，请在传递给new RegExp之前先对其执行escape操作)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53533111
复制相关文章
点击加载更多
腾讯云开发者
