Estoy usando Angular 13 con una tubería para reformatear el texto en un div contenteditable . Todo funciona bien hasta que innerHtml se reemplaza con el nuevo código. Los atributos del último nodo secundario (una etiqueta de span ) se agregan al interior de la etiqueta de span de cierre. No tengo idea de por qué sucede esto.
Estoy usando TypeScript, con Angular 13, en Chromium (MS Edge) v97.0.1072.76 y Firefox v95.0.
Aquí hay un ejemplo:
reformatContent(event: Event) { const el = (event.target as HTMLElement); const originalHtml = el.innerHTML; console.log(originalHtml); // "Some text <span id="someTextId" class="someTextClass">More Text</span> const newHtml = this.reformatText(originalHtml); console.log(newHtml); // "Some text <span id="someTextId" class="someTextClass someNewClass">More Text</span> <-- this is ok, what I expected. el.innerHTML= newHtml; console.log(el.innerHTML); // "Some text <span id="someTextId" class="someTextClass someNewClass">More Text</span id="someTextId" class="someTextClass someNewClass"> <-- why is this happening??? } Solo quiero dejar claro que el HTML originalHtml incluye la etiqueta de cierre </span> . Así que no creo que el navegador esté tratando de cerrar la etiqueta.
Editar por error tipográfico.
Edición 2: actualicé el código original para errores tipográficos y para que quede más claro cómo estaba obteniendo el HTML interno. No pensé que ahí estaba el problema, pero aparentemente es así, porque esto funciona:
reformatContent(event: Event) { const e = (event.target as HTMLElement); const el = document.getElementById(e.id); const originalHtml = el.innerHTML; console.log(originalHtml); // "Some text <span id="someTextId" class="someTextClass">More Text</span> const newHtml = this.reformatText(originalHtml); console.log(newHtml); // "Some text <span id="someTextId" class="someTextClass someNewClass">More Text</span> <-- this is ok, what I expected. el.innerHTML= newHtml; console.log(el.innerHTML); // "Some text <span id="someTextId" class="someTextClass someNewClass">More Text</span> <-- now it works }No entiendo por qué la forma original de obtener el elemento causó este problema. Lo arreglé, pero realmente me gustaría entender qué está pasando aquí.
¿Qué es la función reformatear texto?
this.reformatText(originalHtml)Esta función está cambiando su lapso y su error es de aquí.
Puede decir que su resultado es correcto, pero está utilizando console.log en una variable no válida (originalHtml)
¿Qué es y dónde está originalHtml?
Pero, en general, lo que sé, su problema se debe a esta línea:
const newHtml = this.reformatText(originalHtml);