javascript - 使用jquery将文本括在span标签中的括号中？

Question

我正在 WordPress 中处理一些标题。有些标题是剧集名称，有些是文章名称。播客剧集名称标题如下所示:

<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。像这样的事情:

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