0
223
Vistas¿Las etiquetas <strong> hacen que el espacio desaparezca o se colapse?
Un poco raro:
Estoy creando un elemento de entrada que muestra los resultados sugeridos y resalta el valor de entrada como una subcadena de cada resultado.
Entonces, por ejemplo, si escribiera ' gato ', sugeriría y resaltaría la categoría.
Solo estoy agregando una etiqueta fuerte al resultado: content.innerHTML = ${arr[x].substr(0, index)}<strong>${arr[x].substr(index, match.length)}< /fuerte>${matriz[x].substr(índice+coincidencia.longitud)} ;
Ejemplo simplificado de codepen aquí
Mi problema, que parece que no puedo replicar en el codepen anterior a pesar de que es el mismo código HTML interno, es que si la coincidencia está al lado de un espacio, ese espacio desaparece. Ej: ' tes ' => 'Esto es una prueba'.
El espacio está en el html (abajo), y la cadena sale correctamente a la consola, así que siento que esto tiene que ser debido a la etiqueta fuerte.
Sin duda, me patearé cuando alguien señale mi error, pero no puedo verlo.
1 Respuestas
Responde la pregunta0
En la captura de pantalla de las herramientas de desarrollo, puedo ver que el div contenedor es un flexbox, mientras que el codepen no lo es. Es el flexbox el que está causando esto.
Ver fragmento a continuación
const content = document.querySelectorAll(".content"); const arr = ["Red square", "Blue circle", "Green rectangle"]; const match = "rec"; content.forEach((element) => { for (let x = 0; x < arr.length; x++) { if (arr[x].toUpperCase().indexOf(match.toUpperCase()) !== -1) { const index = arr[x].toUpperCase().indexOf(match.toUpperCase()); element.innerHTML = `${arr[x].substr(0, index)}<strong>${arr[x].substr( index, match.length )}</strong>${arr[x].substr(index + match.length)}`; } } }); .wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; background-color: lightgrey; } .content { height: 10rem; width: 20rem; font-size: 1.7rem; background-color: white; margin-bottom: 1rem; } .withFlex { display: flex; } <div class="wrapper"> <div>No Flexbox</div> <div class="content"></div> <div>With Flexbox</div> <div class="content withFlex"></div> </div>