0
201
Viewsdetectar espacios delante o detrás de la palabra para resaltar
Me gustaría saber cómo puedo resaltar cualquier letra y si hay un espacio después o antes de la palabra, no se come el espacio...
function highlight(text) { const InputsTexts = document.querySelectorAll('.item-question-faq'); for (const inputText of InputsTexts) { let innerHTML = inputText.innerHTML; let index = innerHTML.toUpperCase().indexOf(text.toUpperCase()); if (index !== -1) { innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + '</span>' + innerHTML.substring(index + text.length); inputText.innerHTML = innerHTML; } } } document.body.onload = function() { highlight('order'); }; .item-question-faq { display: flex; margin-left: 5px; align-items: center; font-size: 14px; margin-left: 3px; margin-right: 3px; } .highlight { background: yellow; } <p class="item-question-faq webrep-faq" >the order is important</p> 
Aquí hay una impresión de cómo se ve al aplicar el resaltado 
la aplicación no puede usar Jquery o bibliotecas, ¿cómo puedo resolver esto?
1 answers
Answer question0
Esto se debe a que configuró el elemento principal (párrafo) para display: flex . Parte de lo que hace un flexbox es decidir cómo empaquetar los elementos secundarios y cuánto espacio agregar entre ellos.
Es casi seguro que es un error usar display: flex para un elemento que contiene directamente texto sin procesar. Por lo general, los flexboxes son elementos de envoltura que contienen bloques discretos de contenido.
Si elimina esta propiedad, permitiendo que el párrafo use su display: block , los espacios se conservarán como esperaba.
function highlight(text) { const InputsTexts = document.querySelectorAll('.item-question-faq'); for (const inputText of InputsTexts) { let innerHTML = inputText.innerHTML; let index = innerHTML.toUpperCase().indexOf(text.toUpperCase()); if (index !== -1) { innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + '</span>' + innerHTML.substring(index + text.length); inputText.innerHTML = innerHTML; } } } document.body.onload = function() { highlight('order'); }; .item-question-faq { margin-left: 5px; align-items: center; font-size: 14px; margin-left: 3px; margin-right: 3px; } .highlight { background: yellow; } <p class="item-question-faq webrep-faq" >the order is important</p>consejo menor: puede usar forEach de javascript para hacer que su código sea un poco más conciso.
En vez de:
const InputsTexts = document.querySelectorAll('.item-question-faq'); for (const inputText of InputsTexts) { /* do stuff */ }Considerar:
document.querySelectorAll('.item-question-faq').forEach((inputText) => { /* do stuff */ });