Encoder les entités HTML en JavaScript

Question

Je travaille dans un CMS qui permet aux utilisateurs de saisir du contenu. Le problème est que lorsqu'ils ajoutent des symboles ® il se peut qu'il ne s'affiche pas correctement dans tous les navigateurs. Je voudrais établir une liste de symboles qui doivent être recherchés, puis convertis en l'entité html correspondante. Par exemple

® => ®
& => &
© => ©
™ => ™

Après la conversion, elle doit être enveloppée dans une enveloppe <sup> ce qui donne le résultat suivant :

® => <sup>&reg;</sup>

Parce qu'une taille de police et un style de remplissage particuliers sont nécessaires :

sup { font-size: 0.6em; padding-top: 0.2em; }

Le JavaScript serait-il quelque chose comme ça ?

var regs = document.querySelectorAll('®');
  for ( var i = 0, l = imgs.length; i < l; ++i ) {
  var [?] = regs[i];
  var [?] = document.createElement('sup');
  img.parentNode.insertBefore([?]);
  div.appendChild([?]);
}

Où "[ ?]" signifie qu'il y a quelque chose dont je ne suis pas sûr.

Détails supplémentaires :

• Je voudrais faire ça avec du JavaScript pur, pas quelque chose qui nécessite une bibliothèque comme jQuery, merci.
• Le backend est Ruby
• Utilisation de RefineryCMS qui est construit avec Ruby on Rails

Answer 1

Vous pouvez utiliser une expression rationnelle pour remplacer tout caractère d'une plage unicode donnée par son équivalent en entité html. Le code ressemblerait à ceci :

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

Ce code remplacera tous les caractères dans la plage donnée (unicode 00A0 - 9999, ainsi que l'esperluette, plus grand et moins grand que) avec leurs équivalents d'entité html, ce qui est simplement &#nnn; où nnn est la valeur unicode que nous obtenons de charCodeAt .

Voyez-le en action ici : http://jsfiddle.net/E3EqX/13/ (cet exemple utilise jQuery pour les sélecteurs d'éléments utilisés dans l'exemple. Le code de base lui-même, ci-dessus, n'utilise pas jQuery)

Ces conversions ne résolvent pas tous les problèmes : assurez-vous que vous utilisez le codage de caractères UTF8 et que votre base de données stocke les chaînes de caractères en UTF8. Vous pouvez consulter le site toujours Il se peut que les caractères ne s'affichent pas correctement, en fonction de la configuration des polices du système et d'autres problèmes indépendants de votre volonté.

Documentation

• String.charCodeAt - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
• Entités de caractères HTML - http://www.chucke.com/entities.html

Answer 2

La réponse actuellement acceptée a plusieurs problèmes. Ce billet les explique, et propose une solution plus robuste. La solution proposée dans cette réponse avait précédemment :

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
  return '&#' + i.charCodeAt(0) + ';';
});

El i est redondant car aucun symbole Unicode dans la plage de U+00A0 à U+9999 n'a de variante majuscule/minuscule en dehors de cette même plage.

El m est redondant car ^ o $ ne sont pas utilisés dans l'expression régulière.

Pourquoi la plage U+00A0 à U+9999 ? Cela semble arbitraire.

Quoi qu'il en soit, pour une solution qui encode correctement tous sauf les symboles ASCII sûrs et imprimables dans l'entrée (y compris les symboles astraux !), et met en œuvre toutes les références de caractères nommés (pas seulement ceux de HTML4), utiliser le il bibliothèque (disclaimer : cette bibliothèque est la mienne). Extrait de son README :

il (pour "entités HTML") est un encodeur/décodeur d'entités HTML robuste écrit en JavaScript. Il supporte toutes les références normalisées de caractères nommés, conformément à l'HTML , poignées esperluettes ambiguës et autres cas limites comme le ferait un navigateur dispose d'une suite d'essais complète et, contrairement à de nombreuses autres solutions JavaScript, elle est dotée d'un système de gestion de la qualité. il gère très bien les symboles astraux Unicode. Une démo en ligne est disponible.

Voir aussi cette réponse pertinente de Stack Overflow .

Answer 3

J'ai eu le même problème et j'ai créé 2 fonctions pour créer des entités et les retranscrire en caractères normaux. Les méthodes suivantes traduisent n'importe quelle chaîne de caractères en entités HTML et inversement sur un prototype de chaîne de caractères.

/**
 * Convert a 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) + ";";
    });
};

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

Vous pouvez ensuite l'utiliser comme suit :

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

Sortie dans la console :

Entities: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést
String: Dit is e´†®¥¨©ø…ˆƒ÷™ƒæø£¨ ƒ™en t£eést

Answer 4

Il s'agit d'une réponse pour les personnes qui cherchent à savoir comment coder les entités html, car elle ne répond pas vraiment à la question concernant le wrapper <sup> et les entités de symboles.

Pour les entités des balises HTML (&, <, et >), sans aucune bibliothèque, si vous n'avez pas besoin de supporter IE < 9, vous pourriez créer un élément html et définir son contenu avec Node.textContent :

var str = "<this is not a tag>";
var p = document.createElement("p");
p.textContent = str;
var converted = p.innerHTML;

Voici un exemple : https://jsfiddle.net/1erdhehv/

Answer 5

L'un des moyens les plus simples pour Coder ou décoder les entités HTML
juste appeler une fonction avec un argument...

Décoder les entités HTML

function decodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}

Décoder les entités HTML (JQuery)

function decodeHTMLEntities(text) {
  return $("<textarea/>").html(text).text();
}

Encodage des entités HTML

function encodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerText = text;
  return textArea.innerHTML;
}

Encoder les entités HTML (JQuery)

function encodeHTMLEntities(text) {
  return $("<textarea/>").text(text).html();
}