How to highlight multiple words in JavaScript with button click-CodePudding

I am trying to make it so one or more specific words is highlighted with a button click.

The word is hard-coded in JavaScript. I also want this highlighted feature to not be case sensitive.

In the below code, the word "agreement" will highlight, but only one word - not multiple words or multiple case types.

The goal is for one button to highlight one or more words and another button to clear the highlight. I am able to do this but only for one instance of the word.

$('#clickpurpleagreement').click(function() {
  highlightpurpleagreement('agreement')
});

function highlightpurpleagreement(text) {
  console.log($('#inputText').text());
  //inputText = document.getElementById("inputText")
  var innerHTML = $('#inputText').text();
  var index = innerHTML.indexOf(text);
  if (index >= 0) {
    innerHTML = innerHTML.substring(0, index)   "<span class='highlightpurpleagreementword'>"   innerHTML.substring(index, index   text.length)   "</span>"   innerHTML.substring(index   text.length);
    $('#inputText').html(innerHTML);
  }

}

$('#clear').click(function() {
  clearpurple('agreement')
});

function clearpurple(text) {
  console.log($('#inputText').text());
  //inputText = document.getElementById("inputText")
  var innerHTML = $('#inputText').text();
  var index = innerHTML.indexOf(text);
  if (index >= 0) {
    innerHTML = innerHTML.substring(0, index)   "<span class='clearpurple'>"   innerHTML.substring(index, index   text.length)   "</span>"   innerHTML.substring(index   text.length);
    $('#inputText').html(innerHTML);
  }

}

.highlightpurpleagreementword {
  background-color: #847bba;
}

.clearpurple {
  background-color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div>
  <a  id="clear"><strong>Clear Highlight</strong></a>
  <a  id="clickpurpleagreement"><strong>Agreement</strong></a>
</div>

<div  id="inputText">The agreement, Agreement, or agreement is in review</div>

CodePudding user response：

<div>
  <button id="clear"><strong>Clear Highlight</strong></button>
  <button id="clickpurpleagreement"><strong>Agreement</strong></button>
</div>

<div  id="inputText">The agreement, Agreement, or agreement is in review</div>
<script>
var colorChanger = document.getElementById("clickpurpleagreement");
colorChanger.addEventListener("click",function() {
  document.getElementById('inputText').style.color = "#847bba";  
});

var colorChanger1 = document.getElementById("clear");
colorChanger1.addEventListener("click",function() {
  document.getElementById('inputText').style.color = "black";  
});
</script>

CodePudding user response：

Instead of indexOf use a Regular Expression to find all occurrences of a substring:

function wordIndexes(text) {
    var innerHTML = $('#inputText').text();
    var regexp = new RegExp(text, 'igm');
    var matches = innerHTML.match(regexp);
    while(match = regexp.exec(innerHTML)) {
        console.log(match.index);
    }
}

wordIndexes('agreement');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="inputText">The agreement, Agreement, or agreement is in review</div>