gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 00:39:04 25 4
gpt4 key购买 nike

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

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

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

我现在的解决方案:

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

最佳答案

假设作者只输入纯文本,您可以使用正则表达式来搜索标签词(或短语),并将 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 之前使用它们)

关于javascript - 通过包含 HTML 的变量来检查特定单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53533111/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com