如何拆分PHP Blade中的邮箱并通过JS组装实现反垃圾爬虫保护

方案1：自定义data属性拆分+JS动态拼接（你要求的实现逻辑） #

后端Blade拆分逻辑 #

首先在Blade模板中将完整邮箱按@拆分为本地前缀和域名后缀两部分，分别存入自定义data属性，静态HTML中不会出现完整邮箱字符串：

@php
// 拆分邮箱为两部分，注意提前判断邮箱格式合法性避免报错
[$localPart, $domainPart] = array_pad(explode('@', $email, 2), 2, '');
@endphp

<!-- 静态HTML中仅存储拆分后的片段，无完整邮箱 -->
<a href="javascript:;" class="protected-email" 
   data-local="{{ e($localPart) }}" 
   data-domain="{{ e($domainPart) }}">
   联系我们
</a>

注意：如果需要前端显示邮箱文本，不要直接把{{ $email }}写在标签内，留空或者写占位文本由JS动态填充

前端JS拼接逻辑 #

页面DOM加载完成后，遍历所有加密邮箱标签，拼接还原完整邮箱：

// 原生JS实现，无框架依赖
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.protected-email').forEach(el => {
    const fullEmail = `${el.dataset.local}@${el.dataset.domain}`;
    // 设置mailto跳转链接
    el.setAttribute('href', `mailto:${fullEmail}`);
    // 如需显示邮箱文本，取消下方注释即可
    // el.textContent = fullEmail;
  });
});

如果需要更高安全性，可以增加简单的字符偏移加密逻辑：后端将每个字符的ASCII码+1后存入data属性，前端拼接前将ASCII码-1还原，避免爬虫直接匹配到特征片段。

其他有效的邮箱反爬虫方案 #

• HTML实体转义：使用htmlentities()函数将邮箱的每个字符转为HTML实体编码，绝大多数基础爬虫不会解析实体编码，浏览器可正常识别渲染，实现成本极低。
• CSS方向混淆：将邮箱字符串倒序写入HTML，搭配direction: rtl; unicode-bidi: bidi-override CSS属性让前端正序显示，爬虫抓取到的是无效的倒序字符串。
• 图片渲染：将邮箱生成图片展示，搭配点击复制功能，仅针对高安全需求场景使用，缺点是会损失一部分用户体验。
• 触发式加载：用户点击「查看邮箱」按钮后再通过接口请求/JS逻辑渲染完整邮箱，进一步提高爬虫抓取门槛。

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