Live Demo: get-different-parts-of-a-url

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>JavaScript Get Different Part of a URL</title>
</head>
<body>
 <script>
 // Prints complete URL
 document.write(window.location.href + " ");
 
 // Prints protocol like http: or https:
 document.write(window.location.protocol + " "); 
 
 // Prints hostname with port like localhost or localhost:3000
 document.write(window.location.host + " ");
 
 // Prints hostname like localhost or www.example.com
 document.write(window.location.hostname + " ");
 
 // Prints port number like 3000
 document.write(window.location.port + " ");
 
 // Prints pathname like /products/search.php
 document.write(window.location.pathname + " "); 
 
 // Prints query string like ?q=ipad
 document.write(window.location.search + " ");
 
 // Prints fragment identifier like #featured
 document.write(window.location.hash);
 </script>
 Note: If the URL does not contain a specific component (e.g., port number, and fragment identifier here), it will be set to ''.
</body>
</html>

Code Editor

Output Preview