Convertir les caractères spéciaux en HTML en Javascript

Question

Est-ce que quelqu'un sait comment convertir des caractères spéciaux en HTML en Javascript ?

Exemple :

• & (esperluette) devient &amp .
• " (guillemet double) devient &quot quand ENT_NOQUOTES n'est pas défini.
• ' (guillemets simples) devient &#039 seulement quand ENT_QUOTES est réglé.
• < (moins que) devient &lt .
• > (plus grand que) devient &gt .

Answer 1

Le meilleur moyen, à mon avis, est d'utiliser la fonctionnalité d'échappement HTML intégrée au navigateur pour gérer la plupart des cas. Pour ce faire, il suffit de créer un élément dans l'arbre DOM et de définir l'attribut innerText de l'élément à votre chaîne. Ensuite, récupérez le innerHTML de l'élément. Le navigateur renvoie une chaîne de caractères codée en HTML.

function HtmlEncode(s)
{
  var el = document.createElement("div");
  el.innerText = el.textContent = s;
  s = el.innerHTML;
  return s;
}

Test de fonctionnement :

alert(HtmlEncode('&;\'><"'));

Output:

&;'><"

Cette méthode d'échappement du HTML est également utilisée par l'application Bibliothèque Prototype JS mais différemment de l'échantillon simpliste que j'ai donné.

Remarque : vous devrez toujours échapper vous-même les guillemets (doubles et simples). Vous pouvez utiliser l'une des méthodes décrites par d'autres ici.

Answer 2

Vous avez besoin d'une fonction qui fait quelque chose comme

return mystring.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");

Mais en tenant compte de votre souhait d'une gestion différente des guillemets simples/doubles.

Answer 3

Cette fonction générique encode chaque caractère non alphabétique dans son code html (numérique) :

function HTMLEncode(str) {
    var i = str.length,
        aRet = [];

    while (i--) {
        var iC = str[i].charCodeAt();
        if (iC < 65 || iC > 127 || (iC>90 && iC<97)) {
            aRet[i] = '&#'+iC+';';
        } else {
            aRet[i] = str[i];
        }
    }
    return aRet.join('');
}

Answer 4

Créez une fonction qui utilise la chaîne de caractères replace

function convert(str)
{
  str = str.replace(/&/g, "&");
  str = str.replace(/>/g, ">");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/"/g, "&quot;");
  str = str.replace(/'/g, "&#039;");
  return str;
}

Answer 5

De Mozilla ...

Notez que charCodeAt renvoie toujours une valeur inférieure à 65 536. Cela s'explique par le fait que les points de code supérieurs sont représentés par une paire de pseudo-caractères "de substitution" (de valeur inférieure) qui sont utilisés pour composer le caractère réel. Pour cette raison, afin d'examiner ou de reproduire le caractère complet pour les caractères individuels de valeur 65 536 et plus, il est nécessaire, pour ces caractères, de récupérer non seulement charCodeAt(i), mais aussi charCodeAt(i+1) (comme si l'on examinait/reproduisait une chaîne avec deux >lettres).

La meilleure solution

/**
 * (c) 2012 Steven Levithan <http://slevithan.com/>
 * MIT license
 */
if (!String.prototype.codePointAt) {
    String.prototype.codePointAt = function (pos) {
        pos = isNaN(pos) ? 0 : pos;
        var str = String(this),
            code = str.charCodeAt(pos),
            next = str.charCodeAt(pos + 1);
        // If a surrogate pair
        if (0xD800 <= code && code <= 0xDBFF && 0xDC00 <= next && next <= 0xDFFF) {
            return ((code - 0xD800) * 0x400) + (next - 0xDC00) + 0x10000;
        }
        return code;
    };
}

/**
 * Encodes special html characters
 * @param string
 * @return {*}
 */
function html_encode(string) {
    var ret_val = '';
    for (var i = 0; i < string.length; i++) { 
        if (string.codePointAt(i) > 127) {
            ret_val += '&#' + string.codePointAt(i) + ';';
        } else {
            ret_val += string.charAt(i);
        }
    }
    return ret_val;
}

Exemple d'utilisation :

html_encode("");