¿Cómo obtener un objeto que contenga parámetros de la URL actual en JavaScript?

El propósito de este artículo es obtener un objeto que contenga el parámetro de la URL actual.

Ejemplo:

Input: www.geeksforgeeks.org/search?name=john&age=27
Output: { 
           name: "john", 
           age: 27
        }

Input: geeksforgeeks.org
Output: {}

Para lograrlo, seguimos los siguientes pasos.

  • Crea un objeto vacío.
  • Usando el método String.match(), extraiga todos los parámetros de consulta que están separados por ? y &, para lograr esto usamos la expresión regular /([^?=&]+)(=([^&]*))/g
  • El método String.match() devuelve una array que contiene todas las consultas.
  • El uso del ciclo for…each itera la array y en cada iteración divide el valor en el signo = usando el método String.split() . Este método devuelve una array de 2 strings, la string 0 es la parte izquierda del signo = y la string 1 es la parte derecha del signo =.
  • Asigne la primera string como clave y la segunda string como el valor de esa clave en el objeto recién creado.
  • Finalmente, devuelva el objeto recién creado.

Ejemplo:

Javascript

<script>
    function getAllParams(url) {
  
        // Create an empty object
        let obj = {};
  
        // Extract the query params
        let paramsArray = url.match(/([^?=&]+)(=([^&]*))/g)
  
        // Check if there is one or more params
        if (paramsArray) {
  
            // Iterate the params array
            paramsArray.forEach((query) => {
  
                // Split the array
                let strings = query.split("=")
  
                // Assign the values to the object
                obj[strings[0]] = strings[1]
            })
        }
          
        // Return the object
        return obj;
    }
  
    console.log(getAllParams(
        "www.geeksforgeeks.org/search?name=john&age=27"))
    console.log(getAllParams("geeksforgeeks.org"))
</script>

Producción:

{
age: "27",
name: "john"
}

{}

Publicación traducida automáticamente

Artículo escrito por GeeksforGeeks 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 *