Joindre les segments d'URL

JavaScriptJavaScriptBeginner
Pratiquer maintenant

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

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce laboratoire, nous allons explorer comment joindre les segments d'URL et normaliser l'URL résultante à l'aide de JavaScript. Le laboratoire vous guidera tout au long du processus d'utilisation de diverses expressions régulières pour supprimer les doubles barres obliques, ajouter les barres obliques appropriées pour le protocole, supprimer les barres obliques avant les paramètres, combiner les paramètres avec '&' et normaliser le premier délimiteur de paramètres. À la fin de ce laboratoire, vous serez capable d'unir et de normaliser efficacement les segments d'URL à l'aide de JavaScript.


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/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28456{{"Joindre les segments d'URL"}} javascript/data_types -.-> lab-28456{{"Joindre les segments d'URL"}} javascript/arith_ops -.-> lab-28456{{"Joindre les segments d'URL"}} javascript/comp_ops -.-> lab-28456{{"Joindre les segments d'URL"}} javascript/spread_rest -.-> lab-28456{{"Joindre les segments d'URL"}} end

Joindre et normaliser les segments d'URL

Pour joindre les segments d'URL donnés et normaliser l'URL résultante, suivez les étapes suivantes :

  1. Utilisez Array.prototype.join() pour combiner les segments d'URL.
  2. Utilisez une série d'appels à String.prototype.replace() avec diverses expressions régulières pour normaliser l'URL résultante en :
    • Enlevant les doubles barres obliques
    • Ajoutant les barres obliques appropriées pour le protocole
    • Enlevant les barres obliques avant les paramètres
    • Combinant les paramètres avec '&' et normalisant le premier délimiteur de paramètres.

Utilisez le extrait de code ci-dessous pour joindre et normaliser les segments d'URL :

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

Utilisation de l'exemple :

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

Sommaire

Félicitations ! Vous avez terminé le laboratoire Joindre les segments d'URL. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.