Javascript - Get Portion of URL Path

Extracting path with anchor elements

For cases where you are dealing with URLs not related to the current site, create a stand-in anchor element for parsing:

const a = document.createElement('a');
a.href = 'http://example.com/page/subpage?query#hash';
const path = a.pathname.split('/')[1]; // 'page', the actual hero of the URL


Utilizing Regular expressions

For handling URLs with more complex structures, a regular expression is the Chris Hemsworth of the JavaScript world:

const url = 'http://example.com/page/subpage?query#hash';
const pathMatch = /^[^:]+:\\/\\/(?<domain>[^\\/]+)(?<path>\\/[^?#]*)(?:[?#]|$)/.exec(url);
const path = pathMatch.groups.path.split('/')[1]; // So 'page' walked into a bar...


This approach translates to matching the URL, like a detective trying to decipher a villain's master plan.

Embracing URLUtils

URLUtils are like the superhero support staff, providing consistency and ensuring every piece of URL info you need is readily available.

Using URL API to access URL components

When you're in a new-age project, you've got the URL() constructor at your disposal:

const url = new URL('http://example.com/page/subpage?query#hash');
const segment = url.pathname.split('/')[1];


Just like Thor's hammer, it does all the heavy lifting of parsing URLs and provides easy access to properties.

Pointers for corner cases

URL component decoding

URL path elements may include encoded characters. Use decodeURIComponent():

const decodedSegment = decodeURIComponent('/page%20one');


This will yield "page one" over "page%20one".

Checking for trailing slashes

Be alert of URLs that end with '/' as these could alter the results of your path segment extraction:

const url = 'http://example.com/page/';
const pathSegments = url.pathname.split('/').filter(Boolean);


With filter(Boolean) you can eliminate any empty strings resulting from trailing slashes.

Identifying and handling query strings and hashes

Consider query strings and hashes for separation and extraction:

const queryString = url.search;
const hashString = url.hash;


Using browser devtools

Leverage browser development tools to check URL parsing features compatibility. It's crucial as some properties, like window.location.port, can vary across browsers.

Storing URL path segments

To keep your code clean and readable, store path segments in dedicated variables:

const [,, subpage] = window.location.pathname.split('/'); // The double comma is because the first segment ('') wasn't invited to the party.
