如何获取含@的超链接并批量在新标签页打开？

问题原因 #

你之前遇到的问题核心在于：

• 调用$("a:contains('@')").prop('href')时，jQuery默认仅返回第一个匹配元素的href属性，而非所有元素的集合；
• 直接用for循环触发点击，可能因浏览器弹窗拦截机制（非用户主动触发的弹窗易被拦截）或循环逻辑疏漏，导致仅打开第一个链接。

解决方案 #

方案1：用jQuery的.each()遍历处理

直接通过.each()遍历所有匹配的锚标签，逐个获取URL并打开：

$("a:contains('@')").each(function() {
  // 获取当前链接的URL
  const linkUrl = $(this).attr('href');
  // 在新标签页打开链接
  window.open(linkUrl, '_blank');
});

这里的$(this)指向遍历过程中的每一个锚标签，能精准获取对应链接的URL。

方案2：转为DOM数组后用forEach遍历

如果偏好数组操作，先用.get()将jQuery对象转为DOM元素数组，再遍历处理：

const targetLinks = $("a:contains('@')").get();
targetLinks.forEach(link => {
  // DOM元素可直接访问href属性
  window.open(link.href, '_blank');
});

关键注意事项 #

浏览器通常会拦截非用户主动触发的批量弹窗，建议将代码绑定到用户点击事件中（比如按钮点击），避免被拦截：

// 假设页面有一个id为openAllBtn的按钮
$('#openAllBtn').click(function() {
  $("a:contains('@')").each(function() {
    window.open($(this).attr('href'), '_blank');
  });
});

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