Déséchapper les caractères HTML avec 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 la manière d'annuler l'échappement des caractères HTML à l'aide de JavaScript. L'échappement HTML est une technique couramment utilisée pour encoder les caractères spéciaux dans le HTML afin d'empêcher les attaques de type cross-site scripting. Cependant, parfois, nous devons convertir les caractères échappés en leur forme d'origine. Nous allons apprendre à le faire en créant une fonction qui annule l'échappement des caractères HTML les plus courants.


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-28677{{"Déséchapper les caractères HTML avec JavaScript"}} javascript/data_types -.-> lab-28677{{"Déséchapper les caractères HTML avec JavaScript"}} javascript/arith_ops -.-> lab-28677{{"Déséchapper les caractères HTML avec JavaScript"}} javascript/comp_ops -.-> lab-28677{{"Déséchapper les caractères HTML avec JavaScript"}} end

Déséchapper le HTML

Cette fonction déséchappe les caractères HTML échappés. Pour l'utiliser, suivez ces étapes :

  1. Ouvrez le Terminal/SSH.
  2. Tapez node.
  3. Copiez et collez le code suivant :
const unescapeHTML = (str) =>
  str.replace(
    /&|<|>|'|"/g,
    (tag) =>
      ({
        "&": "&",
        "&lt;": "<",
        "&gt;": ">",
        "&#39;": "'",
        "&quot;": '"'
      })[tag] || tag
  );
  1. Appelez la fonction unescapeHTML et passez-lui une chaîne de caractères avec des caractères échappés.
  2. La fonction renverra la chaîne de caractères déséchappée.

Utilisation exemple :

unescapeHTML("&lt;a href=&quot;#&quot;&gt;Me &amp; you&lt;/a&gt;");
// '<a href="#">Me & you</a>'

Sommaire

Félicitations ! Vous avez terminé le laboratoire Déséchapper le HTML. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.