I'm trying to create Breadcrumbs navigation and I'm stuck while creating parent URLs.
So my idea is:
get a full URL from child level
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']
You can split the URL's pathname
on the URL path separator character /
and then iterate the path parts to build your list:
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")));