如何在h1标签中为撇号及其前一个字符包裹span标签？

需求是把H1标签里的撇号（'）和它紧挨着的前一个字符一起用<span>包裹，比如将<h1>Can't</h1>转换成<h1>Ca<span>n'</span>t</h1>。目前你已经实现了单独包裹撇号的jQuery代码，只需要调整正则表达式就能选中撇号前的字符。

修改后的核心代码 #

把原来匹配单个撇号的正则，改成匹配任意单个字符+撇号的组合，替换时将这两个字符一起放入<span>：

$("h1:contains('')").html(function(_, html) {
   // 用(.)捕获撇号前的任意字符，(')捕获撇号，替换时组合到span里
   return html.replace(/(.)(')/g, '<span>$1$2</span>');
});

正则说明 #

• (.)：匹配任意单个字符（除换行符外），并将其作为第一个捕获组（对应替换语句里的$1）
• (')：匹配撇号，作为第二个捕获组（对应$2）
• 替换时把$1和$2一起包裹进<span>，就实现了同时选中前一个字符和撇号的需求

完整可运行示例 #

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Can't</h1>
<h1>Don't give up</h1>

CSS代码

span { color: red; }

jQuery代码

$("h1:contains('')").html(function(_, html) {
   return html.replace(/(.)(')/g, '<span>$1$2</span>');
});

运行后，Can't会被处理成Ca<span>n'</span>t，Don't会变成Do<span>n'</span>t，完全符合需求。

内容的提问来源于stack exchange，提问作者alexkodr