Zamknij i ponownie otwórz znacznik wokół określonego słowa

Question

Muszę zamknąć znacznik <span> przed słowem "cześć" i ponownie otworzyć go zaraz po kliknięciu przycisku.

Oto Fiddle

To jest mój kod:

<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) 
    }); 
}); 

Wyjście HTML Mam po kliknięciu .button jest:

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

a wyjście chcę jest:

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

Dlaczego nie jest funkcja wstawiania tag zamykający </span>.join?

Answer 1

Można modyfikować strukturę DOM jak struna, ale trzeba by kierować elementu nadrzędnego, ponieważ nie można wstawić elementy cząstkowe

$('.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

Zauważ, że działa to z przykładem, ale jeśli rodzic ma również inne elementy, może powodować problemy, i zdecydowanie sugerowałbym inding inny sposób, aby uzyskać wynik, którego szukasz innych niż zamykanie i otwieranie elementów w środku itp

EDIT:

Oto kolejny sposób to zrobić, to nie wpływa na rodzic w ogóle i jest o wiele ładniejszy.
Wykorzystuje outerHTML dostać otaczające tagi, a także, w ten sposób żadne elementy cząstkowe są wstawione, ale oba znaczniki otwierające i zamykające są częścią ciągów przekazywanych

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

FIDDLE

lub nawet neater jQuery wersja

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

FIDDLE

Answer 2

Nie można modyfikować struktury domowej jak ciąg.

$('.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

Możesz zastąpić słowo "Cześć" swoim ciągiem, który chcesz

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