How to Parse Website URL and Extract Hostname,Query String,Hostname and Pathname in Javascript Full Tutorial For Beginners

How to Parse Website URL and Extract Hostname,Query String,Hostname and Pathname in Javascript Full Tutorial For Beginners

 

 

Welcome folks today in this blog post we will be parsing a website url and extracting hostname,query string and pathname in javascript. All the full source code of application is shown below.

 

 

 

Get Started

 

 

 

In order to get started just make an index.html file and copy paste the following code

 

index.html

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>Parse URL in Javascript</title>
  </head>
  <body></body>
  <script>
    const url = new URL("https://freemediatools.com/encryptpdf");

    console.log(url.href); // => 'http://example.com/path/index.html'
  </script>
</html>

 

 

Now if you open your browser and inside console you will see that

 

 

 

Now we will be extracting the query string inside the website url as shown below

 

<!DOCTYPE html>
<html>
  <head>
    <title>Parse URL in Javascript</title>
  </head>
  <body></body>
  <script>
    const url = new URL("https://freemediatools.com/encryptpdf?message=hello&who=world");

    console.log(url.search); // => 'http://example.com/path/index.html'
  </script>
</html>

 

 

 

Now we will extract the hostname present inside the website as shown below

 

<!DOCTYPE html>
<html>
  <head>
    <title>Parse URL in Javascript</title>
  </head>
  <body></body>
  <script>
    const url = new URL("https://freemediatools.com/encryptpdf");

    console.log(url.hostname); // => 'http://example.com/path/index.html'
  </script>
</html>

 

See also  Build a Electron.js + React.js Audio Mp3 Song Player GUI Desktop App Using Howler.js Library in HTML5 & Javascript Full Project For Beginners

 

Now we will be extracting the pathname present inside the website url

 

<!DOCTYPE html>
<html>
  <head>
    <title>Parse URL in Javascript</title>
  </head>
  <body></body>
  <script>
    const url = new URL("https://freemediatools.com/encryptpdf?path=name");

    console.log(url.pathname); // => 'http://example.com/path/index.html'
  </script>
</html>

 

 

Now we will be extracting the hash value from the website url as shown below

 

<!DOCTYPE html>
<html>
  <head>
    <title>Parse URL in Javascript</title>
  </head>
  <body></body>
  <script>
    const url = new URL("https://freemediatools.com/encryptpdf?path=name#name");

    console.log(url.hash); // => 'http://example.com/path/index.html'
  </script>
</html>

 

 

 

Now we will be getting the value of query parameters present inside the website url as shown below

 

<!DOCTYPE html>
<html>
  <head>
    <title>Parse URL in Javascript</title>
  </head>
  <body></body>
  <script>
    const url = new URL("https://freemediatools.com/encryptpdf?path=name&second=gautam");

    console.log(url.searchParams.get('path'));
    console.log(url.searchParams.get('second'));
  </script>
</html>

 

 

Leave a Reply