Question

我正在使用Wordpress中的一些游戏。有些标题是剧集名称，有些是文章名称。 Podcast剧集名称标题如下所示：

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

播客剧集标题在括号中包含标题末尾的剧集编号。我希望使用一些jQuery将括号及其包含的文本包装成span标记，如下所示

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

非常感谢任何帮助！

这是播客网站的常见问题。我希望我的问题具体可以吸引类似的人。感谢。

Answer 1

要实现此目的，您可以使用正则表达式来捕获括号内的值，然后再将其替换为包含该文本的span。像这样：

＆＃13;

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

＆＃13;

.titleEpisodeValue { color: #C00; }

＆＃13;

<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>

＆＃13;

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>

使用jquery在span标记中的括号中包装文本？

2 个答案: