angulartypescriptbreadcrumbs

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


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']

Solution

  • 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")));