Unir segmentos de URL

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 unir segmentos de URL y normalizar la URL resultante utilizando JavaScript. El laboratorio te guiará a través del proceso de utilizar varias expresiones regulares para eliminar barras dobles, agregar barras adecuadas para el protocolo, eliminar barras antes de los parámetros, combinar parámetros con '&' y normalizar el primer delimitador de parámetros. Al final de este laboratorio, serás capaz de unir y normalizar eficientemente segmentos de URL utilizando JavaScript.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic 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/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28456{{"Unir segmentos de URL"}} javascript/data_types -.-> lab-28456{{"Unir segmentos de URL"}} javascript/arith_ops -.-> lab-28456{{"Unir segmentos de URL"}} javascript/comp_ops -.-> lab-28456{{"Unir segmentos de URL"}} javascript/spread_rest -.-> lab-28456{{"Unir segmentos de URL"}} end

Unión y normalización de segmentos de URL

Para unir los segmentos de URL dados y normalizar la URL resultante, siga los pasos siguientes:

  1. Utilice Array.prototype.join() para combinar los segmentos de URL.
  2. Utilice una serie de llamadas a String.prototype.replace() con diferentes expresiones regulares para normalizar la URL resultante:
    • Eliminando barras dobles
    • Agregando barras adecuadas para el protocolo
    • Eliminando barras antes de los parámetros
    • Combinando parámetros con '&' y normalizando el primer delimitador de parámetros.

Utilice el fragmento de código siguiente para unir y normalizar los segmentos de URL:

const URLJoin = (...args) =>
  args
    .join("/")
    .replace(/[\/]+/g, "/")
    .replace(/^(.+):\//, "$1://")
    .replace(/^file:/, "file:/")
    .replace(/\/(\?|&|#[^!])/g, "$1")
    .replace(/\?/g, "&")
    .replace("&", "?");

Uso de ejemplo:

URLJoin("http://www.google.com", "a", "/b/cd", "?foo=123", "?bar=foo");
// 'http://www.google.com/a/b/cd?foo=123&bar=foo'

Resumen

¡Felicitaciones! Has completado el laboratorio de Unión de Segmentos de URL. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.