如何通过单击按钮在 JavaScript 中突出显示多个单词

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

<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>

Answer 2

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