javascript - 使用 string.replace 应用字符串数组

Question

假设我有一个像这样的字符串:

const sentence = "This is my custom string";

我想突出显示这句话中输入字段的单词。

假设用户输入了一个字符串，我已将各个单词转换为数组，如下所示:

["custom", "string", "is"]

我知道想要用数组中单词的突出显示版本替换句子中的单词。对于一个词，我会做这样的事情:

const word = 'custom';

const searchFor = new RegExp(`(${word})`, 'gi');
const replaceWith = '<strong class="highlight">$1</strong>';

const highlightedSentence = sentence.replace(searchFor, replaceWith);

如何将数组的逻辑应用到整个句子？

我不能简单地循环它，因为该字符串将包含我突出显示的类，该类也将被纳入第二个循环、第三个循环等的突出显示过程中。

这意味着在第二个循环中，如果用户输入:

"high custom"

我会突出显示我突出显示的类，从而突出显示 inception。

举个例子来说明我的意思，尝试注释/取消注释 2 个荧光笔功能:

https://jsfiddle.net/qh9ttvp2/1/

Answer 1

你的问题是，在替换单词时，你用 .class 'highlight' 替换已经添加的 html 标签。

这里的解决方案可能是替换除 html 标记之外的任何内容。替换 jsfiddle 示例中的这一行。

const searchFor = new RegExp(`(${word})(?!([^<]+)?>)`, 'gi');