Tengo una matriz de cadenas que estoy mostrando en HTML en spans . Todos los tramos están envueltos dentro del div conteneditable . Ahora, si un usuario está agregando nuevas palabras, el navegador por defecto está agregando eso en el lapso más cercano en lugar de crear un nuevo lapso para cada palabra.

Básicamente, estoy ejecutando *ngFor para mostrar etiquetas de span . Estoy actualizando la matriz para que también actualice el dom, pero aquí el problema es que la matriz actualizada no se muestra en HTML.

código HTML

 <div contenteditable="true" [id]="'data-section'+i"> <ng-container *ngFor="let word of captionData.caption; trackBy:identify; let j = index"> <span #caption [innerHTML]="word | punctuation" [id]="+i+'-'+j"></span> </ng-container> </div>

Código TS

 seperateSpans(event: any, index: any) { const html: any = document.getElementById('data-section' + index)!; let spans = html.getElementsByTagName("span")!; let newArray: any = []; for (let i = 0; i < spans.length; i++) { let innerTextSpan: any = spans[i]?.innerHTML.trim().split(/\s+/); // If span has multiple words, then push the words individually if (innerTextSpan.length > 1) { for (let j = 0; j < innerTextSpan.length; j++) { spans[i].innerHTML = innerTextSpan[j] newArray.push(innerTextSpan[j]) } } else { newArray.push(innerTextSpan[0]) } } this.captionListData[index].caption = newArray; // Assign the new array to current array so that the current HTML dom also should be refresh with new spans

}

A continuación se muestra el texto inicial. Cada palabra está en un nuevo lapso

Texto inicial

A continuación se muestra la imagen después de agregar nuevas palabras y llamar a la función mencionada después de eso. Las palabras añadidas vienen dos veces.

Después de agregar nuevas palabras

Como puede ver en la imagen de arriba, en lugar de que cada palabra se vincule con un lapso, los lapsos más antiguos siguen siendo los mismos y con esos lapsos nuevos también se muestran, lo que está causando este duplicado. No sé cómo manejar esto.

Objetivo: Mi objetivo final es separar cada palabra en un nuevo lapso. Por ejemplo, si hay 2 palabras en un intervalo <span>Demo text</span> Después de llamar a la función, debería ser <span>Demo</span><span>text</span> Por favor, avíseme si me falta algo. aquí o si debería intentar cualquier otro enfoque