Parámetros de URL como Objeto

JavaScriptJavaScriptBeginner
Practicar Ahora

This tutorial is from open-source community. Access the source code

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En este laboratorio, exploraremos cómo extraer y mapear los parámetros de una URL en un objeto de JavaScript utilizando expresiones regulares y métodos de arrays. Aprenderemos a utilizar String.prototype.match() para obtener todos los pares clave-valor y Array.prototype.reduce() para transformarlos en un solo objeto. Al final de este laboratorio, tendrás una mejor comprensión de cómo trabajar con URLs y extraer información útil de ellas.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28364{{"Parámetros de URL como Objeto"}} javascript/data_types -.-> lab-28364{{"Parámetros de URL como Objeto"}} javascript/arith_ops -.-> lab-28364{{"Parámetros de URL como Objeto"}} javascript/comp_ops -.-> lab-28364{{"Parámetros de URL como Objeto"}} javascript/higher_funcs -.-> lab-28364{{"Parámetros de URL como Objeto"}} end

Objeto con parámetros de URL

Para crear un objeto que contenga los parámetros de la URL actual, siga estos pasos:

  1. Abra la Terminal/SSH y escriba node para comenzar a practicar la codificación.
  2. Utilice String.prototype.match() con una expresión regular adecuada para extraer todos los pares clave-valor.
  3. Utilice Array.prototype.reduce() para mapear y combinarlos en un solo objeto.
  4. Pase location.search como argumento para aplicarlo a la URL actual.

Aquí está el código:

const getURLParameters = (url) =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)), a
    ),
    {}
  );

Puede utilizar esta función con cualquier URL para obtener un objeto con sus parámetros. Aquí hay algunos ejemplos:

getURLParameters("google.com"); // {}
getURLParameters("http://url.com/page?name=Adam&surname=Smith");
// {name: 'Adam','surname': 'Smith'}

Resumen

¡Felicidades! Has completado el laboratorio de Parámetros de URL como Objeto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.