Estaba reemplazando todos los espacios en un elemento div con para poder leer fácilmente todos los espacios con un archivo JavaScript. Cuando estaba codificando esto, me di cuenta de que los elementos dentro del div se estropearían porque las propiedades como ids requieren espacios entre el nombre de la etiqueta y la propiedad se reemplazaría rompiendo la etiqueta. ¿Cómo podría ignorar el espacio entre la etiqueta y el nombre y solo reemplazar los espacios de texto?
Código:
let el = document.getElementById('parent'); function replaceText() { let text = el.innerHTML.split(' ').join(' '); el.innerHTML = text; console.log(text); } //I dont want the span tag or em tag to get messed up by this <!DOCTYPE html> <html> <body> <div id='parent'> Lorem ipsum <span id='element'> <em id='child'>dolor sit amet</em> </span> </div> <button onclick='replaceText()'>Change with nbsp</button> </body> </html>La mejor manera que se me ocurre es buscar nodos de texto en el elemento. Deberá llamar a la función recursivamente hasta que no haya más nodos de texto. Aquí hay un código de ejemplo para comenzar.
function replaceText(element) { for (let childNode of element.childNodes) { if (childNode.nodeType === Node.TEXT_NODE) { childNode.data = ' ' + childNode.data.trim().replace(/ /g, '\u00a0') + ' ' continue } // Recursively replace text for child node replaceText(childNode) } } <!DOCTYPE html> <html> <body> <div id='parent'> Lorem ipsum <span id='element'> <em id='child'>dolor sit amet</em> </span> </div> <button onclick='replaceText(document.getElementById("parent"))'>Change with nbsp</button> </body> </html>