Splitting an Url with slashes and recombining them sequentially (angular, typescript)

Question

I'm trying to create Breadcrumbs navigation and I'm stuck while creating parent URLs.

So my idea is:

1. get a full URL from child level

2. splitting that URL with slashes and recombining them sequentially

So simply if the URL is:

www.nice.com/events/registration/form

then, split to like:

www.nice.com/events/registration/form   

www.nice.com/events/registration 

www.nice.com/events   

www.nice.com

and reverse the order and push into array like:

['www.nice.com', 'www.nice.com/events', 'www.nice.com/events/registration', 'www.nice.com/events/registration/form']

Answer 1

You can split the URL's pathname on the URL path separator character / and then iterate the path parts to build your list:

TS Playground

function createPaths(url: URL): [URL, ...URL[]] {
  const paths: URL[] = [];

  if (url.pathname === "/") {
    paths.push(new URL(url.pathname, url.origin));
  } else {
    const pathParts = url.pathname.split("/");
    for (let i = 0; i < pathParts.length; i += 1) {
      paths.push(new URL(pathParts.slice(0, i + 1).join("/"), url.origin));
    }
  }

  // Possibly desired: If the input URL has query or fragment data,
  // add a final URL to the list which includes that data:
  if (url.search || url.hash) {
    const finalUrl = new URL(paths.at(-1)!);
    finalUrl.search = url.search;
    finalUrl.hash = url.hash;
    paths.push(finalUrl);
  }

  return paths as [URL, ...URL[]];
}

const url = new URL("https://www.nice.com/events/registration/form");
const paths = createPaths(url);
console.log(paths); // ["https://www.nice.com/","https://www.nice.com/events","https://www.nice.com/events/registration","https://www.nice.com/events/registration/form"]

console.log(createPaths(new URL("https://www.nice.com/events/registration/form?key=value#footer"))); // ["https://www.nice.com/","https://www.nice.com/events","https://www.nice.com/events/registration","https://www.nice.com/events/registration/form","https://www.nice.com/events/registration/form?key=value#footer"]

Compiled JS from the playground:

"use strict";
function createPaths(url) {
    const paths = [];
    if (url.pathname === "/") {
        paths.push(new URL(url.pathname, url.origin));
    }
    else {
        const pathParts = url.pathname.split("/");
        for (let i = 0; i < pathParts.length; i += 1) {
            paths.push(new URL(pathParts.slice(0, i + 1).join("/"), url.origin));
        }
    }
    if (url.search || url.hash) {
        const finalUrl = new URL(paths.at(-1));
        finalUrl.search = url.search;
        finalUrl.hash = url.hash;
        paths.push(finalUrl);
    }
    return paths;
}
const url = new URL("https://www.nice.com/events/registration/form");
const paths = createPaths(url);
console.log(paths);
console.log(createPaths(new URL("https://www.nice.com/events/registration/form?key=value#footer")));