Estoy tratando de hacer que una o más palabras específicas se resalten con un clic de botón.
La palabra está codificada en JavaScript. También quiero que esta función resaltada no distinga entre mayúsculas y minúsculas.
En el siguiente código, se resaltará la palabra "acuerdo", pero solo una palabra, no varias palabras ni varios tipos de casos.
El objetivo es que un botón resalte una o más palabras y otro botón borre el resaltado. Puedo hacer esto, pero solo para una instancia de la palabra.
$('#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>En lugar de indexOf use una expresión regular para encontrar todas las apariciones de una subcadena:
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>EDITAR
¡Gracias! ¿Podría ayudarme con el JavaScript completo que me permitiría codificar la palabra que quiero resaltar?
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>