Umbrechen von Text in Klammern in einem span-Tag mithilfe von jquery?

Question

Ich arbeite mit einigen Titeln in Wordpress. Einige Titel sind Episodennamen und einige sind Artikelnamen. Die Podcast Folge Name Titel wie folgt aussehen:

<h1>Hello i am a title (EP.11)</h1> 

Podcast Episode Titel enthalten eine Episode Nummer am Ende des Titels in einer Klammer. Ich habe gehofft, einige jQuery zu verwenden, um die Klammer und den darin enthaltenen Text in einen span Tag, wie diese

<h1> 
    Hello i am a title 
    <span class="titleEpisodeValue">(EP.11)</span> 
</h1> 

Jede Hilfe zu wickeln ist sehr willkommen!

Dies ist ein häufiges Problem für Podcast-Websites. Ich hoffe, dass die Einzelheiten meiner Frage ähnliche Leute anzieht. Vielen Dank.

Answer 1

Um dies zu erreichen, können Sie einen regulären Ausdruck verwenden, um den Wert innerhalb der Klammer abzufangen, bevor Sie ihn durch eine span ersetzen, die diesen Text enthält. Etwas wie folgt aus:

$('h1').html(function(i, h) { 
 
    return h.replace(/(\(.+\))/g, '<span class="titleEpisodeValue">$1</span>'); 
 
});

.titleEpisodeValue { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Hello i am a title (EP.11)</h1>

Answer 2

var H1=$("h1").html(); 
 
var code=H1.substring(H1.indexOf("("), H1.indexOf(")")+1); 
 
$("h1").html(H1.substring(0,H1.indexOf("("))).append($("<span/>",{html:code}));

h1 >span{color:pink;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Hello i am a title (EP.11)</h1>