Convertir parámetros de URL en un objeto de JavaScript

Dada una URL con parámetros, la tarea es obtener esos parámetros y convertirlos en un objeto JavaScript usando javascript. vamos a discutir algunas técnicas.
Primero esta propiedad para saber.

Método replace()
Este método busca en una string un valor definido, o una expresión regular, y devuelve una nueva string con el valor definido reemplazado.
Sintaxis:
```
string.replace(searchVal, newvalue)
```
Parámetros:
- searchVal: este parámetro es obligatorio. Especifica el valor, o expresión regular, que se va a reemplazar por el nuevo valor.
- valor nuevo: este parámetro es obligatorio. Especifica el valor con el que reemplazar el valor de búsqueda.
Valor devuelto:
Devuelve una nueva string donde los valores definidos han sido reemplazados por el nuevo valor.
Método split()
Este método se usa para dividir una string en una array de substrings y devuelve la nueva array.
Sintaxis:
```
string.split(separator, limit)
```
Parámetros:
- separador: este parámetro es opcional. Especifica el carácter, o la expresión regular, que se usará para dividir la string. Si no se usa, se devolverá la string completa (una array con un solo elemento)
- límite: este parámetro es opcional. Especifica el número entero que especifica el número de divisiones, los elementos más allá del límite de división se excluirán de la array.
Valor devuelto:
Devuelve un nuevo Array, con los elementos divididos.

Ejemplo 1: este ejemplo primero toma la parte del parámetro de la URL y luego usa el método replace() para formar un objeto.

<!DOCTYPE html>  
<html>
  
<head>
    <title>
        JavaScript | Convert URL parameters to a Object.
    </title>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1>
    <p id="GFG_UP" style="font-size: 19px; font-weight: bold;">
    </p>
    <button onClick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN" style="color: green; font-size: 24px; font-weight: bold;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var search = 'https://www.geeksforgeeks.org/?param_1=val_1&x=7&y=9';
        up.innerHTML = search;
        search = search.split('?')[1];
  
        function GFG_Fun() {
            down.innerHTML = '{"' + decodeURI(search)
            .replace(/"/g, '\\"').replace(/&/g, '","')
            .replace(/=/g, '":"') + '"}';
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Ejemplo 2: Este ejemplo implementa la misma funcionalidad pero con un enfoque diferente. Primero toma la parte del parámetro de la URL y luego usa el método replace() para formar un objeto.

<!DOCTYPE HTML>  
<html>
  
<head>
    <title>
        JavaScript | Convert URL parameters to a Object.
    </title>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" style="font-size: 19px; font-weight: bold;">
    </p>
    <button onClick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN" 
       style="color: green; font-size: 24px; font-weight: bold;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var search = 'https://www.geeksforgeeks.org/?param_1=val_1&x=7&y=9';
        up.innerHTML = search;
        search = search.split('?')[1];
  
        function GFG_Fun() {
            down.innerHTML = '{"' + search.replace(/&/g, '", "')
                             .replace(/=/g, '":"') + '"}',
                function(key, value) {
                    return key === "" ? value : decodeURIComponent(value)
                };
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta