Création de slugs compatibles avec les URL à l'aide de JavaScript

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 convertir une chaîne de caractères en un slug compatible avec les URL à l'aide de JavaScript. Le processus consiste à normaliser la chaîne en la convertissant en minuscules et en supprimant les caractères spéciaux, puis à remplacer les espaces, les tirets et les underscores par des tirets. À la fin de ce laboratoire, vous aurez une fonction qui peut générer un slug à partir de n'importe quelle chaîne donnée, ce qui facilitera son utilisation dans les URL et dans d'autres applications web.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL 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") subgraph Lab Skills javascript/variables -.-> lab-28627{{"Création de slugs compatibles avec les URL à l'aide de JavaScript"}} javascript/data_types -.-> lab-28627{{"Création de slugs compatibles avec les URL à l'aide de JavaScript"}} javascript/arith_ops -.-> lab-28627{{"Création de slugs compatibles avec les URL à l'aide de JavaScript"}} javascript/comp_ops -.-> lab-28627{{"Création de slugs compatibles avec les URL à l'aide de JavaScript"}} end

Fonction pour convertir une chaîne en slug d'URL

Pour convertir une chaîne en un slug qui peut être utilisé dans une URL, suivez ces étapes :

  1. Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.
  2. Utilisez les méthodes String.prototype.toLowerCase() et String.prototype.trim() pour normaliser la chaîne.
  3. Utilisez la méthode String.prototype.replace() pour remplacer les espaces, les tirets et les underscores par -, et supprimer les caractères spéciaux.
  4. Implémentez le code suivant :
const slugify = (str) =>
  str
    .toLowerCase()
    .trim()
    .replace(/[^\w\s-]/g, "")
    .replace(/[\s_-]+/g, "-")
    .replace(/^-+|-+$/g, "");
  1. Testez la fonction avec l'entrée slugify('Hello World!'); et elle devrait renvoyer la sortie 'hello-world'.

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur la conversion d'une chaîne en slug. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.