JavaScript 如何获取URL参数

在本文中，我们将学习如何使用JavaScript获取URL参数，并通过示例了解它们的实现。

获取URL参数有两种方法：

使用URLSearchParams对象
分隔和访问每个参数对

方法1：使用URLSearchParams对象

URLSearchParams是一个用于提供可用于处理URL的方法的接口。首先将URL字符串分隔以仅获取URL的参数部分。使用给定URL的split()方法和“?”分隔符。它将字符串分隔为两部分。只有参数的第二部分被选取，然后传递给URLSearchParams构造函数。

此对象的 entries() 方法返回一个带有键/值对的迭代器。然后可以通过访问键值对的第一个索引检索键部分，通过访问第二个索引检索值部分。这可以用于获取URL中的所有参数，根据需要使用。

语法：

let paramString = urlString.split('?')[1];
let queryString = new URLSearchParams(paramString);

for (let pair of queryString.entries()) {
   console.log("Key is: " + pair[0]);
   console.log("Value is: " + pair[1]);
}

示例1: 此示例说明了使用URLSearchParams对象获取URL参数的用法。

<!DOCTYPE html>
<html>
<head>
    <title>
          How To Get URL Parameters using JavaScript?
      </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1> 
    <b>
        How To Get URL Parameters
        With JavaScript?
    </b>
    <p> The url used is: 
https://www.example.com/login.php?a=GeeksforGeeks&b=500&c=Hello Geeks 
    </p>
 
    <p> 
       Click on the button to get the url 
       parameters in the console. 
    </p>
 
    <button onclick="getParameters()"> Get URL parameters </button>
    <script>
    function getParameters() {
        let urlString = 
"https://www.example.com/login.php?a=GeeksforGeeks&b=500&c=Hello Geeks";
        let paramString = urlString.split('?')[1];
        let queryString = new URLSearchParams(paramString);
        for(let pair of queryString.entries()) {
            console.log("Key is:" + pair[0]);
            console.log("Value is:" + pair[1]);
        }
    }
    </script>
</body>
</html>

输出：

JavaScript 如何获取URL参数

方法2：分离和访问每个参数对

查询字符串首先被分隔以获取字符串的参数部分。使用分隔符“?”在给定的URL上使用split()方法。这将将URL分为2部分，并选择仅包含参数的第二部分。使用split()方法再次使用分隔符“&”将该字符串分隔为参数。这将每个参数字符串分隔为一个数组。

这个数组循环遍历每个键和值，通过使用“=”作为分隔符拆分来分隔键值对。这将把键值对分隔成一个数组。可以通过访问键值对的第一个索引来检索键部分，也可以通过访问第二个索引来检索值。这可以用于获取URL中的所有参数，根据需要使用。

语法：

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

示例2： 此示例演示了每个参数对的单独访问。

<!DOCTYPE html>
<html>
<head>
    <title> 
          How To Get URL Parameters using JavaScript? 
      </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1> <b>
        How To Get URL Parameters
        With JavaScript?
    </b>
    <p> The url used is: 
https://www.example.com/login.php?a=GeeksforGeeks&b=500&c=Hello Geeks 
    </p>
 
    <p> 
       Click on the button to get the url
       parameters in the console. 
    </p>
 
    <button onclick="getParameters()"> Get URL parameters </button>
    <script>
    function getParameters() {
        let urlString = 
"https://www.example.com/login.php?a=GeeksforGeeks&b=500&c=Hello Geeks";
        let paramString = urlString.split('?')[1];
        let params_arr = paramString.split('&');
        for(let i = 0; i < params_arr.length; i++) {
            let pair = params_arr[i].split('=');
            console.log("Key is:" + pair[0]);
            console.log("Value is:" + pair[1]);
        }
    }
    </script>
</body>
</html>

输出：

JavaScript 如何获取URL参数