如何用span标签包裹邮箱地址？非直接编辑HTML时加粗末尾邮箱

嘿，我来帮你搞定这个问题！既然没法直接编辑原始HTML，咱们用jQuery动态处理这段文本就完美解决啦。

1. 仅加粗邮箱地址 #

如果只需要把邮箱加粗，用这段代码就可以：

$('.unsub-main').html(function(_, currentHtml) {
  // 用正则匹配标准邮箱格式，替换为加粗版本
  return currentHtml.replace(/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/, '<strong>$&</strong>');
});

2. 用span标签包裹邮箱地址 #

要是需要给邮箱套上span标签（还可以自定义类名方便后续样式控制），可以用这段：

$('.unsub-main').html(function(_, currentHtml) {
  // 用span包裹邮箱，可添加自定义类名
  return currentHtml.replace(/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/, '<span class="highlight-email">$&</span>');
});

3. 同时加粗+用span包裹 #

如果两个需求都要满足，直接把两者结合就行：

$('.unsub-main').html(function(_, currentHtml) {
  return currentHtml.replace(/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/, '<span class="highlight-email"><strong>$&</strong></span>');
});

代码说明 #

• $('.unsub-main') 精准选中目标段落元素
• .html(function(_, currentHtml) { ... }) 获取当前元素的HTML内容，返回修改后的内容完成替换
• 正则表达式/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/可以匹配绝大多数标准格式的邮箱，避免误替换其他文本
• $& 是正则替换的特殊语法，代表刚刚匹配到的完整邮箱字符串

这种方式比用:contains更可靠，因为:contains只能按文本片段匹配，没法精准识别邮箱格式，容易出错哦。

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