Highlight the textContent or innerText of an element containing other elements also based on user's searchedWords Using Pure Javascript

Question

How to highlight all the words that the user is searching without affecting the text of the display and the attributes inside the elements. I have tried some approaches but there is a problem as described below. Please help. Thank you. Keep safe and healthy.

<input type='text' id='search' onkeyup="highlight(this.value)">

<p id='WE1'><b>WE</b>wE & they<a href="url_With_WE_we_wE_WeOnly">them and We</a><span id="we2">we only.</span></p>

function highlight(searchedWords) {
    var p = document.getElementById("WE1");
    var words = searchedWords.trim().split(" ");
    for (var i=0; i < words.length; i++) {
        var word = words[i].trim();

        /*
        searchedWords = "We Only";
        trial#1: use replaceAll
        p.innerHTML = p.innerHTML.replaceAll(word, "<mark>" + word + "</mark>");
        Issues:
        1) replaceAll does not work in other browsers
        2) It highlights also the tag attributes containing the searchedWords
        3) It is case sensitive, it only highlights the exact match, though I've addressed this using this:
           var str = p.innerHTML;
           for (var j=0; j < words.length; j++) {
               var x = words[j].trim(), string = str.toLowerCase();
               while (string.lastIndexOf(x) > -1) {
                   str = str.substring(0, string.lastIndexOf(x)) + "<mark>" 
                       + str.substr(string.lastIndexOf(x), words[j].length) + "</mark>"
                       + str.substring(string.lastIndexOf(x) + words[j].length, str.length);
                   string = string.substring(0, string.lastIndexOf(x));
               }
            }
            p.innerHTML = str;
        4) Changing .toLowerCase() also changes the display to lower case
           var x = p.innerHTML.toLowerCase, word = word.toLowerCase;
            p.innerHTML = x.replaceAll(word, "<mark>" + word + "</mark>");

        trial#2:
        p.innerHTML = p.innerHTML.replace(new RegExp(words[i], "gi"), (match) => `<mark>${match}</mark>`);
        Issues:
        1) OK, it is NOT case sensitive, it highlights all the searchedWords and the display is OK
        2) But, it highlights also the tag attributes containing the searchedWord, anchor tags are affected

        I tried also using p.childNodes, nodeValue, textContent so that the attributes
        containing the searchedWord are not affected yet it only inserts the words
        <mark>SearchedWord</mark> and the searchedWord is not highlighted.
        */
       
    }
}

I haven't found the solution yet. The main problem really is, it replaces also the the attributes of the elements. For example, if the href of an anchor tag contains the searchedWord, the anchor tag becomes ... — Dante Valenzuela, Sep 25 '21 at 00:19

score 0 · Answer 1 · answered Sep 23 '21 at 14:06

0

replaceAll is a new feature es2021. As for today it's incompatible with IE.

I found you something that might work. Please have a look and tell me if you still have problems How to replace all occurrences of a string in JavaScript on stackoverflow

answered Sep 23 '21 at 14:06

Uri Gross

484
1
8
20

Dante Valenzuela · Answer 2 · 2021-09-27T21:06:07.833

I made a workaround by reading the innerHTML from right to left and disregarding the match if there is a "<" character to the left, which means that the match is inside a tag. Although the solution below seems to be manual, yet it works for me for now.

<!DOCTYPE html>
<html>
<input type="text" onkeyup="highlight(this.value)">
<p>Hi! I'm feeling well and happy, hope you too. Thank you.</p>
<p id="WE1"><b>WE</b> wE, We, we.
  <a href="url_With_WE_we_wE_WeOnly">Only you.</a> 
  <span id="wemark">mark it in your calendar.</span>
</p>
<script>
function highlight(searchedWords) {
  var p = document.getElementsByTagName('p');
  for (var i=0; i<p.length; i++) {
    p[i].innerHTML = p[i].innerHTML.replace(new RegExp("<mark>", "gi"),(match) => ``);
    p[i].innerHTML = p[i].innerHTML.replace(new RegExp("</mark>","gi"),(match) => ``);
  }
  var words = searchedWords.trim();
  while (words.indexOf("  ") > -1) {words = words.replace("  "," ")}
  if (!words) return;
  words = words.split(" ");
  for (var i = 0; i < p.length; i++) {
    p[i].innerHTML = mark(p[i].innerHTML, words)
  }
}
function mark(str, words) {
 try {
  for (var j=0; j < words.length; j++) {
    var s = str.toLowerCase(), 
        x = words[j].toLowerCase().trim();
    while (s.lastIndexOf(x) > -1) {
      var loc = s.lastIndexOf(x), y = loc;
      while (y > 0) {
        y = y - 1;
        if (s.substr(y,1)=="<"||s.substr(y,1)==">") break;
      }
      if (s.substr(y, 1) != "<") {
        str = str.substring(0, loc) + "<mark>"
            + str.substr(loc, x.length) + "</mark>"
            + str.substring(loc + x.length, str.length);
      }
      s = s.substring(0, loc-1);
    }
  }
  return str;
 } catch(e) {alert(e.message)}
}
</script>
</html>

Highlight the textContent or innerText of an element containing other elements also based on user's searchedWords Using Pure Javascript

2 Answers2