Solution simple pour encoder des entités HTML en JavaScript

1. Utilisez String.prototype.toHtmlEntities() pour encoder une chaîne en entités HTML
2. Utilisez String.fromHtmlEntities() pour encoder la chaîne à partir d’entités HTML
3. Utilisez la fonction unescapeHTML() pour encoder des entités HTML en JavaScript

Cet article explique les meilleures solutions pour encoder des entités HTML en JavaScript. L’exemple de code ci-dessous traduit n’importe quelle chaîne en entités HTML et revient sur le prototype de chaîne.

Utilisez String.prototype.toHtmlEntities() pour encoder une chaîne en entités HTML

Dans le code JavaScript suivant,

• String.prototype.toHtmlEntities = function() renvoie une chaîne contenant des entités HTML à l’aide de la méthode .replace().
• .replace() trouve la valeur de la chaîne donnée et la remplace par la nouvelle valeur souhaitée/spécifiée.
• .prototype est un objet en JavaScript. Il s’associe aux fonctions et objets par défaut.
• String.charCodeAt() renvoie l’Unicode du caractère qui a décrit l’index dans une chaîne.

/**
 * Conversion of string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
  return this.replace(/./gm, function(s) {
    // return "&#" + s.charCodeAt(0) + ";";
    return (s.match(/[a-z0-9\s]+/i)) ? s : '&#' + s.charCodeAt(0) + ';';
  });
};

Utilisez String.fromHtmlEntities() pour encoder la chaîne à partir d’entités HTML

Dans les instructions JavaScript suivantes, nous avons créé :

• String.fromHtmlEntities = function(string) qui reçoit toute string contenant des entités HTML.
• Ici par exemple, la valeur de chaîne donnée dans .replace() est /&#\d+;/gm qui est remplacée par une fonction(s) qui renvoie une chaîne String.fromCharCode.
• String.fromCharCode est une méthode qui renvoie une chaîne générée par une séquence.

/**
 * Creation of string from HTML entities
 */
String.fromHtmlEntities = function(string) {
  return (string + '').replace(/&#\d+;/gm, function(s) {
    return String.fromCharCode(s.match(/\d+/gm)[0]);
  })
};

Après cela, utilisez la fonction ci-dessous.

• Voici une variable var str qui est initialisée avec une chaîne contenant des caractères spéciaux (†®¥¨©˙∫ø…ˆƒ∆...).
• Une fonction .toHtmlEntities est appelée avec cette chaîne de caractères spéciaux var str.
• console.log est une fonction par défaut de JavaScript qui affiche des valeurs dans la boîte de journal.

var str = "Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

La sortie de la console est la suivante.

"Entities:"
"Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"
"String:"
"Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"

Utilisez la fonction unescapeHTML() pour encoder des entités HTML en JavaScript

Vous pouvez vérifier ces fonctions sur les compilateurs JavaScript en ligne ou hors ligne. Il vous aide à afficher la chaîne sans que le navigateur lise son HTML. Cela peut se faire d’une autre manière. Vous pouvez créer un objet d’entités HTML.

• Une variable var htmlEntities contient des objets de caractères spéciaux et des symboles.
• Une fonction unescapeHTML(str) reçoit des chaînes et renvoie des valeurs à l’aide des conditions .replace().

var htmlEntities = {
  nbsp: ' ',
  cent: '¢',
  pound: '£',
  yen: '¥',
  euro: '€',
  copy: '©',
  reg: '®',
  lt: '<',
  gt: '>',
  quot: '"',
  amp: '&',
  apos: '\''
};

function unescapeHTML(str) {
  return str.replace(/\&([^;]+);/g, function(entity, entityCode) {
    var match;

    if (entityCode in htmlEntities) {
      return htmlEntities[entityCode];
      /*eslint no-cond-assign: 0*/
    } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
      return String.fromCharCode(parseInt(match[1], 16));
      /*eslint no-cond-assign: 0*/
    } else if (match = entityCode.match(/^#(\d+)$/)) {
      return String.fromCharCode(~~match[1]);
    } else {
      return entity;
    }
  });
};

Il n’y a pas de version native des entités HTML en JavaScript. Si vous avez juste besoin de bases pour que le navigateur n’interprète pas comme du HTML. Le projet PHP.js, qui est une tâche de portage des capacités locales de chaque PHP vers JavaScript, contient également un modèle. Le long de ces lignes, j’ai gardé les choses simples et j’ai utilisé le dessous :

function EntitiesHtml(string) {
  return String(string)
      .replace(/&/g, '&')
      .replace(/>/g, '>')
      .replace(/</g, '&lt;')
      .replace(/"/g, '&quot;');
}