JAVASCRIPT
Parse URL into Components (Protocol, Host, Path, Query)
A JavaScript regex solution to break down a given URL string into its core components: protocol, host, port, path, and query parameters.
function parseUrlComponents(url) {
const urlRegex = /^(?:([A-Za-z]+):)?(?:\/\/)([^/:]*)(?::(\d+))?(?:(\/[^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
const matches = url.match(urlRegex);
if (matches) {
return {
protocol: matches[1] || '',
host: matches[2] || '',
port: matches[3] || '',
path: matches[4] || '',
query: matches[5] || '',
hash: matches[6] || ''
};
} else {
return null;
}
}
// Example usage:
// const url = "https://www.example.com:8080/path/to/page?id=123&name=test#section";
// console.log(parseUrlComponents(url));
/*
Output for example:
{
protocol: 'https',
host: 'www.example.com',
port: '8080',
path: '/path/to/page',
query: 'id=123&name=test',
hash: 'section'
}
*/
How it works: This function utilizes a comprehensive regular expression to dissect a URL string into its various components, including the protocol, host, optional port, path, query string, and hash fragment. It returns these components in a structured object, or null if the URL doesn't match the expected pattern. This is invaluable for URL manipulation and analysis.