为外部链接添加target="_blank"后补充rel="noopener"的jQuery问题

嘿，作为编程新手能考虑到这些细节已经超棒啦！咱们一步步把代码完善，解决多空格分割和rel属性检查的核心问题：

第一步：先搞定「外部链接」的判断 #

首先要注意：jQuery原生并没有:external这个选择器哦！咱们得自己实现判断逻辑——筛选出指向当前域名之外的链接：

// 获取当前网站域名
const currentDomain = window.location.hostname;
// 筛选所有以http/https开头，且不包含当前域名的链接
const externalLinks = $('a[href^="http"]').filter(function() {
  return !this.href.includes(currentDomain);
});

第二步：为外部链接添加target="_blank" #

这一步你的思路是对的，直接给筛选出的外部链接设置属性即可：

externalLinks.attr('target', '_blank');

第三步：处理rel属性，确保包含noopener #

接下来解决你遇到的核心问题：处理多空格分割、检查并补充noopener。咱们用更健壮的方式实现：

// 选中所有带有target="_blank"的链接
$('a[target="_blank"]').each(function() {
  // 获取当前元素的rel属性值，没有则返回空字符串
  let relValue = $(this).prop('rel') || '';
  
  // 用正则分割：匹配一个或多个空白字符（解决多空格问题），同时过滤空字符串
  let relArray = relValue.split(/\s+/).filter(item => item);
  
  // 检查数组中是否已存在"noopener"，不存在则添加
  if (!relArray.includes('noopener')) {
    relArray.push('noopener');
  }
  
  // 把数组重新拼接成空格分隔的字符串，设置回rel属性
  $(this).prop('rel', relArray.join(' '));
});

完整代码整合（带注释） #

把上面的步骤整合起来，就是完整的可运行代码：

/**
 * 检测外部链接，添加target="_blank"，并确保rel属性包含noopener
 */
$(function() {
  // 1. 筛选外部链接
  const currentDomain = window.location.hostname;
  const externalLinks = $('a[href^="http"]').filter(function() {
    return !this.href.includes(currentDomain);
  });

  // 2. 为外部链接添加target="_blank"
  externalLinks.attr('target', '_blank');

  // 3. 处理所有target="_blank"的链接，确保rel包含noopener
  $('a[target="_blank"]').each(function() {
    let relValue = $(this).prop('rel') || '';
    // 分割rel值，处理多空格+过滤空元素
    let relArray = relValue.split(/\s+/).filter(Boolean);
    
    // 检查是否已有noopener，无则添加
    if (!relArray.includes('noopener')) {
      relArray.push('noopener');
    }

    // 更新rel属性
    $(this).prop('rel', relArray.join(' '));
  });
});

关键细节解释 #

• 正则分割split(/\s+/)：\s+匹配所有空白字符（空格、制表符、换行等），完美解决多空格分割的问题；
• filter(Boolean)：过滤掉分割后产生的空字符串（比如原rel值开头/结尾有空格的情况）；
• prop('rel') vs attr('rel')：用prop更可靠，因为rel是DOM元素的原生属性，prop能准确获取动态修改后的属性值；
• 空rel处理：如果链接原来没有rel属性，会自动设置为rel="noopener"。

这样不管是静态页面里带多空格的rel，还是无rel的链接，都能正确处理啦！

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