URL Utilities
Parse URLs, extract query parameters, build query strings, and other URL helpers that developers constantly Google.
parseURL
Parse a URL string into its component parts.
const parseURL = (url) => {
try {
const u = new URL(url);
return {
protocol: u.protocol,
host: u.host,
hostname: u.hostname,
port: u.port,
pathname: u.pathname,
search: u.search,
hash: u.hash,
origin: u.origin,
};
} catch {
return null;
}
};
parseURL("https://example.com:8080/path/to/page?q=hello&page=2#section");
// {
// protocol: "https:",
// host: "example.com:8080",
// hostname: "example.com",
// port: "8080",
// pathname: "/path/to/page",
// search: "?q=hello&page=2",
// hash: "#section",
// origin: "https://example.com:8080"
// }
getQueryParams
Parse all query string parameters from a URL into a plain object.
const getQueryParams = (url = window.location.href) => {
const params = new URL(url).searchParams;
return Object.fromEntries(params.entries());
};
getQueryParams("https://example.com/search?q=hello&page=2&sort=asc");
// { q: "hello", page: "2", sort: "asc" }
Get a single query param
const getQueryParam = (name, url = window.location.href) =>
new URL(url).searchParams.get(name);
getQueryParam("page", "https://example.com?page=3"); // "3"
getQueryParam("missing", "https://example.com?q=hi"); // null
buildQueryString
Build a query string from an object.
const buildQueryString = (params) =>
"?" + new URLSearchParams(params).toString();
buildQueryString({ q: "hello world", page: 2, sort: "asc" });
// "?q=hello+world&page=2&sort=asc"
Append to existing URL
const appendQueryParams = (url, params) => {
const u = new URL(url);
Object.entries(params).forEach(([k, v]) => u.searchParams.set(k, v));
return u.toString();
};
appendQueryParams("https://example.com/search?q=hi", { page: 2, sort: "asc" });
// "https://example.com/search?q=hi&page=2&sort=asc"
removeQueryParam
Remove a specific query parameter from a URL.
const removeQueryParam = (url, key) => {
const u = new URL(url);
u.searchParams.delete(key);
return u.toString();
};
removeQueryParam("https://example.com?q=hi&page=2", "page");
// "https://example.com/?q=hi"
isValidUrl
Check if a string is a valid URL.
const isValidUrl = (url) => {
try {
new URL(url);
return true;
} catch {
return false;
}
};
isValidUrl("https://example.com"); // true
isValidUrl("http://localhost:3000"); // true
isValidUrl("not a url"); // false
isValidUrl("ftp://files.example.com"); // true
getDomain
Extract the base domain from a URL.
const getDomain = (url) => {
try {
return new URL(url).hostname;
} catch {
return null;
}
};
getDomain("https://www.example.com/path?q=1"); // "www.example.com"
getDomain("https://api.github.com/users"); // "api.github.com"
getBasePath
Get the path without query string or hash.
const getBasePath = (url) => {
try {
return new URL(url).pathname;
} catch {
return null;
}
};
getBasePath("https://example.com/docs/intro?tab=1#section"); // "/docs/intro"
joinUrl
Safely join URL parts (handles trailing/leading slashes).
const joinUrl = (...parts) =>
parts
.map((p, i) => (i === 0 ? p.replace(/\/$/, "") : p.replace(/^\/+/, "")))
.join("/");
joinUrl("https://example.com/", "/api/", "/users");
// "https://example.com/api/users"
joinUrl("https://example.com", "docs", "intro");
// "https://example.com/docs/intro"
isRelativeUrl
Check if a URL is relative (no protocol or host).
const isRelativeUrl = (url) => !/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(url);
isRelativeUrl("/about"); // true
isRelativeUrl("../images/photo.png"); // true
isRelativeUrl("https://example.com"); // false
Summary
| Function | Purpose |
|---|---|
parseURL(url) | Break a URL into all its parts |
getQueryParams(url) | All query params as an object |
getQueryParam(name, url) | Get a single query param |
buildQueryString(params) | Object → ?key=value&... |
appendQueryParams(url, params) | Add/update params on a URL |
removeQueryParam(url, key) | Strip one query param |
isValidUrl(url) | Boolean validity check |
getDomain(url) | Extract hostname |
joinUrl(...parts) | Safe URL joining |
isRelativeUrl(url) | Detect relative vs absolute |