Chiudi e riapri tag attorno a una parola specifica

Question

Ho bisogno di chiudere un tag <span> prima della parola "ciao" e riaprirlo appena dopo aver fatto clic su un pulsante.

Ecco un Fiddle

Questo è il mio codice:

<span class="border"> 
    border Hello border border 
</span> 
<div> 
    <span class="button">Style me !</span> 
</div> 

jQuery:

$('.button').click(function() { 
    $('.border').each(function() { 
     var t = $(this).text(); 
     var s = t.split('Hello').join('</span>Hello<span class="border">'); 
     $(this).html(s) 
    }); 
}); 

L'output HTML che ho dopo aver cliccato .button è:

<span class="border"> 
    border Hello<span class="border"> border border 
</span> 

E l'uscita che voglio è:

<span class="border"> 
    border </span>Hello<span class="border"> border border 
</span> 

Perché non è la funzione .join inserendo il tag di chiusura </span>?

Answer 1

è possibile modificare la struttura di dom come una corda, ma che avrebbe dovuto indirizzare l'elemento principale, come non è possibile inserire elementi parziali

$('.button').click(function() { 
    $('.border').each(function() { 
     var t = $(this).parent().html(); 
     var s = t.split('Hello').join('</span>Hello<span class="border">'); 
     $(this).parent().html(s) 
    }); 
}); 

FIDDLE

Si noti che questo funziona con l'esempio, ma se il genitore ha anche altri elementi, può causare problemi, e io suggerirei fortemente f inding un altro modo per ottenere il risultato che stai cercando diversi dagli elementi di chiusura e apertura nel mezzo ecc

EDIT:

Ecco un altro modo di farlo, questo non pregiudica la genitore a tutti, ed è molto più ordinato.
utilizza outerHTML per ottenere i tag circostanti e, in questo modo vengono inseriti senza elementi parziali, ma entrambi i tag di apertura e chiusura sono parte delle stringhe passate

$('.button').click(function() { 
    $('.border').each(function() { 
     this.outerHTML = this.outerHTML.split('Hello').join('</span>Hello<span class="border">'); 
    }); 
}); 

FIDDLE

o addirittura più ordinato jQuery versione

$('.button').click(function() { 
    $('.border').prop('outerHTML', function(_, html) { 
     return html.split('Hello').join('</span>Hello<span class="border">'); 
    }); 
}); 

FIDDLE

Answer 2

Non è possibile modificare la struttura del dom come una stringa.

$('.button').click(function() { 
    $('.border').replaceWith(function() { 
     var parts = $(this).text().split('Hello'); 
     return '<span class="border">' + parts.join('</span>Hello<span class="border">') + '</span>'; 
    }); 
}); 

Demo: Fiddle

Answer 3

È possibile sostituire la parola "Ciao" con la stringa che si desidera

$('.button').click(function() { 
     $('.border').each(function() { 
      var t = $(this).text(); 
      var s = t.replace('Hello', '</span>Hello<span class="border">'); 
      $(this).html(s) 
     }); 
    });