Estoy creando un pequeño proyecto que revisará el contenido de un elemento de área de texto, encontrará palabras de la lista de palabras prohibidas y las resaltará si las encuentra. Implementé una solución que funciona para palabras completas, sin embargo, en el escenario de casos extremos, me encontré con un gran problema. A continuación se muestra el código del proyecto:

 const bannedWords = ['treatment', 'cancer', 'allergens']; document.addEventListener('DOMContentLoaded', () => { let checkButton = document.querySelector('.check__btn'); let textArea = document.querySelector('textarea'); checkButton.addEventListener('click', (e) => { e.preventDefault(); let inputString = textArea.value.split(" "); for (let i = 0; i < inputString.length; i++) { if (bannedWords.includes(inputString[i])) { inputString[i] = `<mark>${inputString[i]}</mark>`; } } let outputText = document.querySelector('.output__text'); outputText.innerHTML = inputString.join(" "); return false; }); });

Entonces, por ejemplo, si un usuario ingresó 'tratar' o 'canceroso', no se resaltarán ya que técnicamente no aparecen en la lista.

¡Cualquier ayuda con esto sería apreciada! Salud.