How to highlight multiple words in JavaScript with button click

Question

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 class="button" id="clear"><strong>Clear Highlight</strong></a>
  <a class="button button-purple" id="clickpurpleagreement"><strong>Agreement</strong></a>
</div>

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

Answer 1

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');
    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 class="credits" id="inputText">The agreement, Agreement, or agreement is in review</div>

Edit

You've asked for the full JavaScript that would allow you to hard-code the word that needs to be highlighted:

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

function highlightpurpleagreement(text) {
  var innerHTML = $('#inputText').text();
  var regexp = new RegExp(text, 'igm');
  var result = '';
  var currentIndex = 0;
  while(match = regexp.exec(innerHTML)) {
    result += innerHTML.substring(currentIndex, match.index) + 
      '<span class="highlightpurpleagreementword">' + innerHTML.substring(match.index, match.index + text.length) + '</span>'
    currentIndex = match.index + text.length;
  }
  result += innerHTML.substring(currentIndex);
  $('#inputText').html(result)
}

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

.clearpurple {
  background-color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a class="button" id="clear"><strong>Clear Highlight</strong></a>
  <a class="button button-purple" id="clickpurpleagreement"><strong>Agreement</strong></a>
</div>

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

Answer 2

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

<div class="credits" 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>