Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to parse an URL in JavaScript?
JavaScript provides several methods to parse URLs and extract their components like protocol, hostname, pathname, and query parameters. The modern approach uses the built-in URL constructor, while legacy methods involve creating DOM anchor elements.
Using the URL Constructor (Modern Approach)
The URL constructor is the standard way to parse URLs in modern JavaScript. It creates a URL object with all components easily accessible.
<html>
<body>
<script>
const url = new URL("https://www.youtube.com/watch?v=tNJJSrfKYwQ");
console.log("Protocol:", url.protocol);
console.log("Host:", url.host);
console.log("Hostname:", url.hostname);
console.log("Port:", url.port);
console.log("Pathname:", url.pathname);
console.log("Search:", url.search);
console.log("Hash:", url.hash);
</script>
</body>
</html>
Protocol: https: Host: www.youtube.com Hostname: www.youtube.com Port: Pathname: /watch Search: ?v=tNJJSrfKYwQ Hash:
Using DOM Anchor Element (Legacy Method)
Before the URL constructor was widely supported, developers used DOM anchor elements to parse URLs by setting the href property.
<html>
<body>
<script>
function parseURL(url) {
var urlParser = document.createElement('a');
urlParser.href = url;
return {
protocol: urlParser.protocol,
host: urlParser.host,
hostname: urlParser.hostname,
port: urlParser.port,
pathname: urlParser.pathname,
search: urlParser.search,
hash: urlParser.hash
};
}
const parsedURL = parseURL("https://www.youtube.com/watch?v=tNJJSrfKYwQ");
console.log(JSON.stringify(parsedURL, null, 2));
</script>
</body>
</html>
{
"protocol": "https:",
"host": "www.youtube.com",
"hostname": "www.youtube.com",
"port": "",
"pathname": "/watch",
"search": "?v=tNJJSrfKYwQ",
"hash": ""
}
Extracting Query Parameters
The URL constructor also provides searchParams for easy access to query parameters.
<html>
<body>
<script>
const url = new URL("https://example.com/search?q=javascript&category=tutorial&page=1");
console.log("Query parameter 'q':", url.searchParams.get('q'));
console.log("Query parameter 'category':", url.searchParams.get('category'));
console.log("Query parameter 'page':", url.searchParams.get('page'));
// Get all parameters
console.log("All parameters:");
url.searchParams.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
</script>
</body>
</html>
Query parameter 'q': javascript Query parameter 'category': tutorial Query parameter 'page': 1 All parameters: q: javascript category: tutorial page: 1
Comparison
| Method | Browser Support | Query Params | Recommended |
|---|---|---|---|
| URL Constructor | Modern browsers | Built-in searchParams | Yes |
| DOM Anchor | All browsers | Manual parsing needed | Legacy only |
Conclusion
Use the URL constructor for modern applications as it provides cleaner syntax and built-in query parameter handling. The DOM anchor method remains useful for legacy browser support.
429 Views
