Schließen und erneutes Öffnen des Tags um ein bestimmtes Wort

Question

Ich muss ein <span> Tag vor dem Wort "Hallo" schließen und es sofort nach dem Klicken auf eine Schaltfläche wieder öffnen. Hier

ist ein Fiddle

Dies ist mein Code:

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

Die HTML-Ausgabe Ich habe nach .button Klick ist:

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

Und die Ausgabe ich will, ist:

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

Warum nicht die .join Funktion der </span> Endtag Einfügen ist?

Answer 1

Sie können die DOM-Struktur wie eine Zeichenfolge ändern, aber man müsste das übergeordnete Element Ziel, da Sie nicht Teilelemente einfügen können

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

Beachten Sie, dass dies mit dem Beispiel funktioniert, aber wenn der Elternteil auch andere Elemente hat, kann es Probleme verursachen, und ich würde stark empfehlen, f inding einen anderen Weg, um das Ergebnis zu erhalten, die Sie für andere suchen als Schließ- und Öffnungselemente in der Mitte usw.

EDIT:

Hier ist eine andere Art und Weise tun, so berührt dies nicht die Eltern überhaupt, und ist viel besser.
Es verwendet outerHTML die umliegenden Tags sowie zu bekommen, auf diese Weise keine Teilelemente eingesetzt sind, aber beide Öffnen und Schließen-Tags sind Teil der

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

FIDDLE

oder sogar sauberere geben Strings jQuery Version

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

FIDDLE

Answer 2

Sie können die Dom-Struktur nicht wie eine Zeichenfolge ändern.

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

Sie können das Wort "Hello" durch Ihre gewünschte Zeichenfolge ersetzen

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