如何替换文本中的列表项？

Question

假设我有这样的字符串列表['Alexander','&','2009','>']。

当它们出现在特定文本中时，我想在该列表中的每个关键字周围放置<highlight> 标签。

我试图解决这个问题，但我想避免使用for 循环，因为它似乎会导致像<highlight>Alexander<highlight>Alexander</highlight></highlight> 这样的嵌套，我想避免这种情况。

这是我尝试过的：

var list = ['Alexander','&','2009','>']; // comes dynamically

var textDescription = `Alexander the Great (Ancient Greek: Ἀλέξανδρος ὁ Μέγας, romanized: Aléxandros ho Mégas), was a king (basileus) of the ancient Greek kingdom of Macedon[a] and a member of the Argead dynasty. He was born in Pella in 356 BC and succeeded his father Philip II to the throne at the age of 20. He spent most of his ruling years on an unprecedented military campaign through Asia and northeast Africa, and by the age of thirty, he had created one of the largest empires of the ancient world, stretching from Greece to northwestern India.[1][2] He was undefeated in battle and is widely considered one of history's most successful military commanders.[3]

During his youth, Alexander was tutored by Aristotle until age 16. After Philip's assassination in 336 BC, he succeeded his father to the throne and inherited a strong kingdom `;

for(var i = 0; i < list.length; i++){
   var searchText = list[i];
   var pattern = new RegExp(`\\b${searchText}(?!([\w\s\.]*<\/highlight>))`,'ig');
   var res = textDescription.replace(pattern,function(x){
       return '<highlight>'+x+'</highlight>';
   });
   textDescription = res;
}

$('#highlight').html(textDescription);

highlight{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="highlight"></div>

Answer 1

我已经为你制定了解决方案。

我已经简化了你的代码。你不需要有一个循环。您可以将数组与分隔符 | 连接在一起，用作 OR 运算符，以便找到的任何字符串都将被标签包围。

您会看到我在您输入的内容的末尾添加了一些文本，以便可以测试所有字符串，以及当它们位于另一个字符串的中间时，例如2009 年 2009 年。

编辑：我已更新此答案并删除了模板文字和外观，以更好地与旧浏览器和 IE 等兼容。

var list = ['Alexander','&','2009','>']

var textDescription = "Alexander the Great (Ancient Greek: Ἀλέξανδρος ὁ Μέγας, romanized: Aléxandros ho Mégas), was a king (basileus) of the ancient Greek kingdom of Macedon[a] and a member of the Argead dynasty. He was born in Pella in 356 BC and succeeded his father Philip II to the throne at the age of 20. He spent most of his ruling years on an unprecedented military campaign through Asia and northeast Africa, and by the age of thirty, he had created one of the largest empires of the ancient world, stretching from Greece to northwestern India.[1][2] He was undefeated in battle and is widely considered one of history's most successful military commanders.[3] \nDuring his youth, Alexander was tutored by Aristotle until age 16. After Philip's assassination in 336 BC, he succeeded his father to the throne and inherited a strong kingdom in 2009 BC & 2010 BC. Alexander is > 20090 people."

var pattern = new RegExp("(^|\\W)("+list.join('|')+")(\\W|$)", 'ig')
var textDescription = textDescription.replace(pattern, '$1<highlight>$2</highlight>$3')

$('#highlight').html(textDescription)

highlight {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="highlight"></div>