CODEWITHSUNDEEP
javascripthighlight
kynw
kynw

Reputation: 23

Highlighting all occurrences of specific words in a paragraph from an array of keywords

I have a long paragraph and need to highlight keywords contained in an array. I am able to loop through the array and highlight the first occurrence of each word in the paragraph. I am unable to highlight subsequent occurrences, however.

This is very close to the question asked here. In the example below, I am trying to find and highlight all occurrences of 'dog' and 'field'. This works for finding all occurrences of each word because of the "g" flag. 

var re = new RegExp(arr.join("|"), "g")
console.log('keywords are ' + re);
console.log('The matches are ' + str.match(re));

But I'm not sure if and where there should be a "g" flag within the replace.

<p id="x"></p>

<script>
var arr = ("The dog ran through the field.  The dog ate."); //paragraph from which to search
document.getElementById("x").innerHTML = arr;

var words = ["dog", "field"]; //array of keywords

var str = document.getElementById("x").innerHTML;
var re = new RegExp(words.join("|"), "gi"); // create a a | b | c regex
console.log(words);
console.log(re, str.match(re));
console.log('keywords are ' + re);
console.log('The matches are ' + str.match(re));
str.match(re).forEach(function(match, i) { // loop over the matches
  str = str.replace(match, function replace(match) { // wrap the found strings
    return '<em>' + match + '</em>';
  });
});
document.getElementById("x").innerHTML = str

</script>

em { background-color:yellow }

I have tried using str.replace(/match/g, function(match, i). This doesn't error but it removes all highlighting.

Upvotes: 2

Views: 632

Answers (2)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below option of using RegExp constructor for matching globally and using that for variable for replacing

  var glob = new RegExp(match, "g");
  str = str.replace(glob, function replace(match) { // wrap the found strings
    return '<em>' + match + '</em>';
  });

sample working code 

var arr = ("The dog ran through the field.  The dog ate."); //paragraph from which to search
document.getElementById("x").innerHTML = arr;

var words = ["dog", "field"]; //array of keywords

var str = document.getElementById("x").innerHTML;
var re = new RegExp(words.join("|"), "gi"); // create a a | b | c regex
console.log(words);
console.log(re, str.match(re));
console.log('keywords are ' + re);
console.log('The matches are ' + str.match(re));
str.match(re).forEach(function(match, i) { // loop over the matches
  var glob = new RegExp(match, "g");
  str = str.replace(glob, function replace(match) { // wrap the found strings
    return '<em>' + match + '</em>';
  });

});
document.getElementById("x").innerHTML = str
em { background-color:yellow }
<p id="x"></p>
<script>


</script>

codepen - https://codepen.io/nagasai/pen/NQWOqa

Upvotes: 1

User863
User863

Reputation: 20039

Probably you don't need match(re).forEach, Just use replace(re) alone

var arr = ("The dog ran through the field.  The dog ate."); //paragraph from which to search
document.getElementById("x").innerHTML = arr;

var words = ["dog", "field"]; //array of keywords

var str = document.getElementById("x").innerHTML;
var re = new RegExp(words.join("|"), "gi"); // create a a | b | c regex

str = str.replace(re, function replace(match) { // wrap the found strings
  return '<em>' + match + '</em>';
});

document.getElementById("x").innerHTML = str
<p id="x"></p>

Upvotes: 1

Related Questions