如何分割字符串获取根URL？匹配URL根域名代码失效求排查

嘿，我来帮你解决这两个技术问题，顺便把你代码里的坑给填上～

一、怎么用代码提取URL的根域名？ #

别用手动split字符串啦，太容易踩坑（比如遇到带端口、带用户名密码的URL就歇菜），用浏览器原生的URL API才是最稳的：

function getRootDomain(url) {
  const urlObj = new URL(url);
  let hostname = urlObj.hostname;
  // 去掉开头的www.（如果有的话）
  if (hostname.startsWith('www.')) {
    hostname = hostname.slice(4);
  }
  return hostname;
}

// 测测看：
console.log(getRootDomain('https://www.example.com/12xy45')); // 输出 example.com
console.log(getRootDomain('https://example.com/random')); // 输出 example.com
console.log(getRootDomain('http://blog.example.co.uk/post/1')); // 输出 example.co.uk

这个方法能自动处理各种合法URL的边缘情况，比手动分割靠谱多了。

二、如何从文本里只匹配根域名，不是完整URL？ #

如果要从一段杂文本里揪出所有根域名（比如文本里混着“去https://www.example.com逛逛，或者看看example.org的内容”），可以用正则表达式来匹配，同时避开完整URL的前缀：

function extractRootDomains(text) {
  // 正则规则：匹配带/不带www的域名，排除前面的http/https前缀，同时不包含路径
  const domainRegex = /(?:^|\s)(?:www\.)?([a-zA-Z0-9-]+\.[a-zA-Z]{2,})(?=\s|$|\/)/g;
  const uniqueDomains = new Set();
  let match;
  
  while ((match = domainRegex.exec(text)) !== null) {
    // 统一去掉www.，存入集合去重
    const domain = match[1].replace(/^www\./, '');
    uniqueDomains.add(domain);
  }
  
  return Array.from(uniqueDomains);
}

// 测试示例：
console.log(extractRootDomains('我常逛https://www.example.com/12xy45和http://example.org/random，还有test.co.uk的博客'));
// 输出 ["example.com", "example.org", "test.co.uk"]

这个正则能匹配独立出现的域名，不会把URL里的路径部分带进来，对于.co.uk这类多级域名也能正常识别。

三、你的代码为啥跑不起来？我帮你揪出3个问题 #

看你贴的这段代码，主要有这几个bug：

1. HTML标签转义错了：你用<和>代替了<和>，这是在HTML文档里写特殊字符才需要的转义，在JavaScript字符串里直接写<和>就行！写<的话，浏览器会把它当成纯文本显示，根本不会渲染成标签，菜单自然出不来。

2. 根域名提取错了：你用arrLinks[i]["split"]("//")[1]拿到的是//后面的全部内容，包括路径！比如https://www.example.com/12xy45会得到www.example.com/12xy45，这显然不是你要的根域名，得用上面的getRootDomain函数来提取正确的域名。

3. 写法不够规范：arrLinks[i]["split"]("//")虽然语法上没问题，但大家一般都会写成arrLinks[i].split("//")，可读性更好，也符合JS的常规写法。

修复后的代码 #

把这些问题都改了之后，代码应该就能正常跑了：

// 先把获取根域名的函数写上
function getRootDomain(url) {
  const urlObj = new URL(url);
  let hostname = urlObj.hostname;
  if (hostname.startsWith('www.')) {
    hostname = hostname.slice(4);
  }
  return hostname;
}

// 假设arrLinks是你的URL数组，tempLink对应每个URL的域名（用来拿favicon）
for (let i = 0; i < arrLinks.length; i++) {
  const currentUrl = arrLinks[i];
  const rootDomain = getRootDomain(currentUrl);
  // 确保favicon用的是根域名
  const faviconSrc = `https://www.google.com/s2/favicons?domain=${getRootDomain(tempLink)}`;
  // 直接写正常的HTML标签就行，不用转义
  const menuItem = `<ul class='myClassId'><li><a href='${currentUrl}'><img src='${faviconSrc}'/>${rootDomain}<i class='fa fa-angle-right'></i></a></li></ul>`;
  $("#divMenu").append(menuItem);
}

这样改完之后，菜单会正确渲染，显示的文本也是干净的根域名啦～

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