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><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>
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
Thank you! Could you please help me with the full JavaScript that would allow me to hard-code the word that I want highlighted?
OK:
$('#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>