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年为20090。

编辑：我已经更新了此答案，并删除了模板文字和环顾四周，以更好地与旧版浏览器和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>

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

1 个答案: