How do you replace list items in a text?

Question

Let's say I have list of strings like this ['Alexander','&','2009','>'].

I want to put <highlight> tags around each keyword in that list when they appear in a particular text.

I have tried to solve this problem but I want to avoid using a for loop because it seems to cause nesting like this <highlight>Alexander<highlight>Alexander</highlight></highlight> and I want to avoid that.

Here's what I have tried:

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>

Rob Kwasowski · Accepted Answer · 2019-12-26T11:52:27.663

I have worked out a solution for you.

I have simplified your code. You don't need to have a loop. You can just join the array together with the separator |, serving as an OR operator so that whichever string is found it will be surrounded with tags.

You will see that I've added some text to the end of what you put so that all the strings can be tested, and also when they are found in the middle of another string, e.g. 2009 in 20090.

EDIT: I've updated this answer and removed the template literals and lookarounds to have better compatibility with older browsers and IE etc.

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>

one small help, please don't say no. let say i have `['Alexander','&','2009','>','ph'];` i want to even highlight any of **word which begins with space and any of search character in list**. with `ph` it should highlight `Philip's`. as `Philip's` begins with `space` and `ph`. thanks in advance!!! — EaBengaluru, Dec 24 '19 at 17:23
@skBangalore Can you post that as a new question and then I will try to answer. — Rob Kwasowski, Dec 24 '19 at 17:34
https://stackoverflow.com/questions/59472181/how-to-match-all-word-which-starts-with-a-space-and-character — EaBengaluru, Dec 24 '19 at 18:14

How do you replace list items in a text?

1 Answers1