JAVASCRIPT
Extracting URL Components (Protocol, Host, Path, Query, Hash)
Master URL parsing with JavaScript regex. Extract components like protocol, hostname, path, query, and hash efficiently for robust data handling in web applications.
const url = "https://www.example.com:8080/path/to/page?param1=value1¶m2=value2#section";
const urlRegex = /^(?:([A-Za-z]+):\/\/)?(?:(?:([A-Za-z0-9\-._~%]+)(?::([A-Za-z0-9\-._~%]+))?@)?([A-Za-z0-9\-._~%]+)(?::(\d+))?)?([^?#]*)(?:\?([^#]*))?(?:#(.*))?$/;
const match = url.match(urlRegex);
if (match) {
const [, protocol, username, password, hostname, port, path, query, hash] = match;
console.log("Protocol:", protocol);
console.log("Username:", username);
console.log("Password:", password);
console.log("Hostname:", hostname);
console.log("Port:", port);
console.log("Path:", path);
console.log("Query String:", query);
console.log("Hash:", hash);
}
/*
Example Output:
Protocol: https
Username: undefined
Password: undefined
Hostname: www.example.com
Port: 8080
Path: /path/to/page
Query String: param1=value1¶m2=value2
Hash: section
*/
How it works: This JavaScript snippet demonstrates a comprehensive regular expression to parse a URL string and extract its individual components. It uses capturing groups `()` to isolate the protocol, optional authentication (username/password), hostname, port, path, query string, and hash fragment. The `String.prototype.match()` method returns an array containing the full match and all captured groups, which are then destructured for easy access.