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

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>