Angular+TypeScript实现URL拆分重组构建面包屑导航父级URL

按照你提出的思路，这里直接给出可落地的实现逻辑及代码示例：

核心步骤 #

• 拆分目标URL为路径片段，过滤无效空值
• 逐步拼接片段生成每一级完整URL
• 反转数组得到从根域名到当前页面的层级顺序

JavaScript 实现示例 #

基础版（适配无协议的URL）

function buildBreadcrumbUrls(url) {
  // 拆分URL片段并过滤空字符串（避免斜杠开头/结尾导致的无效项）
  const segments = url.split('/').filter(seg => seg);
  const breadcrumbUrls = [];
  let currentUrl = '';

  for (const seg of segments) {
    // 拼接当前片段，避免开头出现多余斜杠
    currentUrl += currentUrl ? `/${seg}` : seg;
    breadcrumbUrls.push(currentUrl);
  }

  // 反转数组得到从根到当前页的顺序
  return breadcrumbUrls.reverse();
}

// 测试示例
const testUrl = 'www.nice.com/events/registration/form';
console.log(buildBreadcrumbUrls(testUrl));
// 输出结果：['www.nice.com', 'www.nice.com/events', 'www.nice.com/events/registration', 'www.nice.com/events/registration/form']

进阶版（适配带协议的完整URL）

如果你的URL包含http/https协议，可以用浏览器原生URL对象处理，确保兼容性：

function buildBreadcrumbUrls(fullUrl) {
  const urlObj = new URL(fullUrl);
  // 组合主机地址与路径部分
  const basePath = `${urlObj.host}${urlObj.pathname}`;
  const segments = basePath.split('/').filter(seg => seg);

  const breadcrumbUrls = [];
  let currentUrl = '';

  for (const seg of segments) {
    currentUrl += currentUrl ? `/${seg}` : seg;
    // 如需生成带协议的完整URL，取消下方注释即可
    // const fullCurrentUrl = `${urlObj.protocol}//${currentUrl}`;
    // breadcrumbUrls.push(fullCurrentUrl);
    breadcrumbUrls.push(currentUrl);
  }

  return breadcrumbUrls.reverse();
}

// 测试带协议的URL
const testUrl = 'https://www.nice.com/events/registration/form';
console.log(buildBreadcrumbUrls(testUrl));
// 输出结果：['www.nice.com', 'www.nice.com/events', 'www.nice.com/events/registration', 'www.nice.com/events/registration/form']

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