All TalkersCode Topics

Follow TalkersCode On Social Media

JavaScript Get URL Parameter Value By Name

Last Updated : Jul 1, 2023

JavaScript Get URL Parameter Value By Name

In this article we will show you the solution of JavaScript get URL parameter value by name, here we created an example URL with a name and age value.

We will use the JavaScript URLSearchParam object to get the URL parameter values by name.

By using URLSearchParam, we can add, remove or retrieve key-value pairs in a URL by manipulating the URL. We can change the existing string or create a new string by using this.

Step By Step Guide On JavaScript Get URL Parameter Value By Name :-

In the example below, we are going to see an example. Let us see the code first.

<!DOCTYPE html>
<html lang = " en " >
    <meta charset = " UTF - 8" >
    <meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
    <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
    <title> JavaScript get URL parameter value by name </title>
        body {
            font-family : 'Lucida Sans' , 'Lucida Sans Regular' , 'Lucida Grande' , 'Lucida Sans Unicode' , Geneva , Verdana , sans-serif ;
        h1 {
         font-size : larger ;
         font-weight : bolder ;
         color : rgb(113, 221, 113) ;
         text-align : center ;
        h3 {
            text-align : center ;
    <h1> TALKERSCODE </h1>
    <h3> JavaScript get URL parameter value by name </h3>
        <input type="text" placeholder="Enter parameter">
        let url_String = '' ;
        let btn = document.querySelector('button')
        let input = document.querySelector('input')
        let show = document.querySelector('p')
        btn.addEventListener('click',() =>{
            let url = new URL(url_String) ;
            let search_String = ;
            let search_Parameters = new URLSearchParams(search_String) ;
            let input_Parameter = input.value ;
                show.innerHTML = search_Parameters.get(input_Parameter) ;
            else {
                show.innerHTML = "wrong patameter" ;
        }) ;
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. Creating a<input> tag with type ‘text’ and placeholder. Then create a <button> too.
  8. Create a <p> tag that will show the name parameter value
  9. Created the <style> tag to add CSS to the HTML page.
  10. To add JavaScript Create a <script> tag.
  11. Using document.querySelector() for both the <button> and <input> tag and also with the <p> tag.
  12. Add the .addEventListner() tag with ta btn.
  13. Use the URL with a new URL string.
  14. Now use slice() method.
  15. URLSearchParam to search the parameter.
  16. Add an if-else statement for, if the search parameter is present on the input parameter then show the result by .innerHTML tag, or else display the wrong parameter.

Conclusion :-

At last, here in conclusion, here we can say that with this article’s help, we know how to get URL parameter values by name using JavaScript.

I hope this article on JavaScript get URL parameter value by name helps you and the steps and method mentioned above are easy to follow and implement.

Latest Tutorials