jqueryを使用してspanタグのかっこ内にテキストをラップしますか？

Question

私はWordpressのいくつかのタイトルで働いています。一部のタイトルはエピソード名であり、一部は記事名です。 Podcastエピソード名のタイトルは次のようになります。

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

ポッドキャストエピソードのタイトルは、括弧内のタイトルの最後にエピソード番号が含まれています。私はすべてのヘルプははるかに高く評価され、この

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

のように、spanタグに括弧とそれに含まれるテキストをラップするために、いくつかのjQueryを使用するように期待していました！

これはポッドキャストのウェブサイトでよく見られる問題です。私の質問の詳細が似たような人々を引き付けることを願っています。ありがとう。

Answer 1

これを実現するには、正規表現を使用して括弧内の値をキャッチしてから、そのテキストを含むspanに置き換えることができます。あなたがこれまでに試してみました何

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