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');
              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');
              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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *