Unione di nodi di testo insieme dopo aver inserito l'intervallo

Question

Ho un'estensione dove sto memorizzando/recuperando una sezione della struttura DOM (sempre una selezione di testo sullo schermo) che l'utente ha selezionato. Quando sto memorizzando una selezione, accludo la sezione in un tag SPAN e evidenziamo il testo in giallo. Ciò fa sì che la struttura DOM attorno al testo selezionato divida in vari nodi di testo. Questo mi crea un problema poiché quando provo a ripristinare questa selezione (senza aggiornare la pagina), questo causa problemi poiché la struttura DOM è stata modificata.

La mia domanda è come evitare che la struttura DOM si divida dopo aver inserito lo SPAN? Se questo non può essere raggiunto, come dovrei riassemblare la struttura DOM dopo aver rimosso il tag SPAN al suo stato originale?

//Insert the span 
var sel = restoreSelection(mootsOnPage[i].startXPath); 
var range = sel.getRangeAt(0).cloneRange(); 
var newNode = document.createElement('span'); 
newNode.className = 'highlightYellow'; 
range.surroundContents(newNode); 


//Original DOM structure 
<p>Hello there, how are you today</p> 


//What the DOM looks like after insertion of SPAN 
<p> 
    "Hello there, " 
    <span class="highlightYellow">how</span 
    " are you today" 
</p> 

Answer 1

È possibile utilizzare questo per scartare il contenuto.

$(".highlightYellow").contents().unwrap(); 

Demo: http://jsfiddle.net/R4hfa/

Answer 2

L'atto stesso di inserire un tag <span> altera il DOM. Questo è, un po 'per definizione, quello che stai facendo quando chiami surroundContents(). Non è possibile aggiungere un tag span senza alterare il DOM che include la divisione dei nodi di testo e l'aggiunta di nuovi elementi per lo span.

Inoltre, a meno che il testo selezionato includa solo nodi di testo interi e la selezione non si avvii/si arresti mai nel mezzo di un nodo di testo, sarà necessario dividere i nodi di testo per collocare lo span nel punto giusto. Quando in seguito rimuovi i tag span, avrai nodi di testo aggiuntivi. Questo non dovrebbe davvero importare nulla, ma se pensi davvero di dover riportare i nodi divisi al loro stato, posso pensare ad un paio di opzioni:

1) Salva il parentNode originale prima dell'intervallo è inserito in esso. Clona, ​​aggiungi l'estensione al clone, sostituisci il nodo originale con il clone e salva l'originale. Quando si desidera ripristinare, reinserire l'originale e rimuovere quello clonato.

2) Quando si rimuove lo span, eseguire una funzione che cerca nodi di testo vicini e combinarli.

3) Scopri perché è importante che ci siano più nodi di testo rispetto a prima, perché questo non dovrebbe importare alcun codice o display.

Answer 3

Usa element.normalize().

Dopo aver rimosso lo span inserito, è possibile utilizzare il metodo element.normalize() per unire i nodi di testo aggiuntivi creati in seguito all'inserimento/rimozione dello span. Il metodo normalize() mette l'elemento specificato e tutti i suoi sottoalberi in un formato "normalizzato" (cioè nessun nodo di testo nel sottoalbero è vuoto e non ci sono nodi di testo adiacenti). Trovato, grazie al commento di @ tcovo.

I nodi di testo all'interno di un elemento si rompono se si inseriscono nodi e quindi si rimuovono. Sfortunatamente non si riorganizzano automaticamente una volta rimosso il nodo aggiuntivo. Per rispondere alle domande delle persone sul "perché" questo è importante, di solito causa problemi quando si lavora con l'evidenziazione del testo nell'interfaccia utente.

Answer 4

Quando si utilizza normalize() fare attenzione! Eliminerà i nodi come <br/> e modificherà il testo e la sua visualizzazione.

normalize() è buono, ma ha i suoi svantaggi.

Così <p>"this is an "<br/>"example"</p> si trasformerà in <p>this is an example</p>

C'è un modo per utilizzare normalize() ma mantenendo le <br/> s?