En este artículo, aprenderemos cómo obtener los parámetros de URL en Javascript, además de comprender su implementación a través de los ejemplos.
Para obtener los parámetros de URL, hay 2 formas:
- Mediante el uso del objeto URLSearchParams
- Usando Separating y accediendo a cada par de parámetros
Método 1: usar el objeto URLSearchParams
URLSearchParams es una interfaz que se utiliza para proporcionar métodos que se pueden utilizar para trabajar con una URL. La string de URL se separa primero para obtener solo la parte de parámetros de la URL. El método split() se usa en la URL dada con el «?» separador. Separará la cuerda en 2 partes. La segunda parte se selecciona con solo los parámetros. Luego se pasa al constructor URLSearchParams.
El métodoentries() de este objeto devuelve un iterador con los pares clave/valor. La parte clave del par se puede recuperar accediendo al primer índice del par y el valor se puede recuperar accediendo al segundo índice. Esto se puede usar para obtener todos los parámetros en la URL que se pueden usar según sea necesario.
Sintaxis:
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]);
}
Ejemplo: este ejemplo ilustra el uso del objeto URLSearchParams para obtener el parámetro de URL.
HTML
<!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>
Producción:
Método de entradas()
Método 2: separar y acceder a cada par de parámetros
La string de consulta se separa primero para obtener solo la parte de parámetros de la string. El método split() se usa en la URL dada con el «?» separador. Esto separará la URL en 2 partes y la segunda parte se selecciona solo con los parámetros. Esta string se separa en los parámetros usando el método split() nuevamente con «&» como separador. Esto separará cada string de parámetros en una array.
Esta array se repite a través de cada una de las claves y los valores se separan dividiéndolos con «=» como separador. Separará los pares en una array. La parte clave del par se puede recuperar accediendo al primer índice del par y el valor se puede recuperar accediendo al segundo índice. Esto se puede usar para obtener todos los parámetros en la URL que se pueden usar según sea necesario.
Sintaxis:
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]);
}
Ejemplo: Este ejemplo ilustra el acceso separado para cada par de parámetros.
HTML
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA