如何用JavaScript解析URL中的邮箱并传入弹窗组件动态URL？

没问题，我来帮你搞定这个需求！下面分两步实现你要的功能：

1. 从URL中解析邮箱地址 #

首先得明确邮箱在URL里的存在形式，常见的两种场景：

场景A：邮箱作为URL参数存在（比如 https://example.com?email=test@test.com） #

这种情况用浏览器原生的URLSearchParams最稳妥：

// 获取当前页面的URL
const currentUrl = new URL(window.location.href);
// 从参数中提取邮箱
const userEmail = currentUrl.searchParams.get('email');

场景B：邮箱直接在URL路径中（比如 https://example.com/user/test@test.com） #

这种情况可以用正则表达式匹配标准邮箱格式：

// 匹配邮箱的正则（覆盖大部分常见格式）
const emailRegex = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/;
// 从当前URL中匹配邮箱
const matchResult = window.location.href.match(emailRegex);
const userEmail = matchResult ? matchResult[0] : null;

2. 拼接URL并调用弹窗函数 #

拿到邮箱后，就可以拼接目标URL，然后调用showPopupWidget了，记得加个判断避免邮箱为空的情况：

// 检查是否成功解析到邮箱
if (userEmail) {
  // 拼接带邮箱的目标URL，用encodeURIComponent编码避免URL格式错误
  const popupUrl = `https://website.com?utm_campaign=${encodeURIComponent(userEmail)}`;
  // 调用弹窗函数
  showPopupWidget(popupUrl);
} else {
  console.log('未从URL中解析到邮箱地址');
  // 这里可以加默认处理逻辑，比如调用不带参数的弹窗
  // showPopupWidget('https://website.com');
}

重点提醒：一定要用encodeURIComponent()对邮箱进行编码，避免@这类特殊字符破坏URL结构，这是很容易踩的坑！

如果你的URL里邮箱的位置比较特殊（比如在哈希值里），可以告诉我具体的URL格式，我再帮你调整解析逻辑~

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