175 votes

Encoder les entités HTML en JavaScript

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

30voto

takdeniz Points 411

Vous pouvez utiliser ceci.

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

var regexString = '[';
for(var key in escapeChars) {
  regexString += key;
}
regexString += ']';

var regex = new RegExp( regexString, 'g');

function escapeHTML(str) {
  return str.replace(regex, function(m) {
    return '&' + escapeChars[m] + ';';
  });
};

https://github.com/epeli/underscore.string/blob/master/escapeHTML.js

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;
        }
    });
};

7voto

Jared Beck Points 4975

Si vous utilisez déjà jQuery, essayez html() .

$('<div>').text('<script>alert("gotcha!")</script>').html()
// "&lt;script&gt;alert("gotcha!")&lt;/script&gt;"

Un noeud de texte en mémoire est instancié, et html() est appelé sur elle.

C'est moche, ça gaspille un peu de mémoire, et je n'ai aucune idée si c'est aussi complet que quelque chose comme la fonction he mais si vous utilisez déjà jQuery, c'est peut-être une option pour vous.

Tiré de l'article de blog Encoder des entités HTML avec jQuery par Felix Geisendörfer.

7voto

StefansArya Points 865

Si vous voulez éviter de coder les entités html plus d'une fois

function encodeHTML(str){
    return str.replace(/([\u00A0-\u9999<>&])(.|$)/g, function(full, char, next) {
      if(char !== '&' || next !== '#'){
        if(/[\u00A0-\u9999<>&]/.test(next))
          next = '&#' + next.charCodeAt(0) + ';';

        return '&#' + char.charCodeAt(0) + ';' + next;
      }

      return full;
    });
}

function decodeHTML(str){
    return str.replace(/&#([0-9]+);/g, function(full, int) {
        return String.fromCharCode(parseInt(int));
    });
}

# Exemple

var text = "<a>Content &#169; <#>&<&#># </a>";

text = encodeHTML(text);
console.log("Encode 1 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = encodeHTML(text);
console.log("Encode 2 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = decodeHTML(text);
console.log("Decoded: " + text);

// <a>Content © <#>&<&#># </a>

5voto

Yash Points 4565

Caractères spéciaux HTML et ses ESCAPE CODES

_Les caractères réservés doivent être échappés par le HTML : Nous pouvons utiliser un échappement de caractère pour représenter tout caractère Unicode [Ex : & - U+00026] en HTML, XHTML ou XML en utilisant uniquement des caractères ASCII. Références de caractères numériques [ Ex : esperluette(&) - &#38; ] & Références de personnages nommés [Ex : &amp; ] sont des types de character escape used in markup ._


Entités prédéfinies

    <strong>Original Character</strong>      <strong>XML entity replacement</strong>     <strong>XML numeric replacement</strong>  
                  <                                     &lt;                                            &#60;                    
                  >                                      &gt;                                          &#62;                    
                  "                                      &quot;                                       &#34;                    
                  &                                    &amp;                                        &#38;                    
                   '                                     &apos;                                       &#39;                    

Pour afficher les balises HTML sous une forme normale dans une page Web, nous utilisons la méthode suivante <pre> , <code> ou on peut y échapper. Echapper la chaîne en la remplaçant par toute occurrence de la balise "&" par la chaîne de caractères "&amp;" et toutes les occurrences du ">" par la chaîne de caractères "&gt;" . Ex : stackoverflow post

function escapeCharEntities() {
    var map = {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&apos;"
    };
    return map;
}

var mapkeys = '', mapvalues = '';
var html = {
    encodeRex : function () {
        return  new RegExp(mapkeys, 'g'); // "[&<>"']"
    }, 
    decodeRex : function () {
        return  new RegExp(mapvalues, 'g'); // "(&amp;|&lt;|&gt;|&quot;|&apos;)"
    },
    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ), // json = {&: "&amp;", <: "&lt;", >: "&gt;", ": "&quot;", ': "&apos;"}
    decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),
    encode : function ( str ) {
        var encodeRexs = html.encodeRex();
        console.log('Encode Rex: ', encodeRexs); // /[&<>"']/gm
        return str.replace(encodeRexs, function(m) { console.log('Encode M: ', m); return html.encodeMap[m]; }); // m = < " > SpecialChars
    },
    decode : function ( str ) {
        var decodeRexs = html.decodeRex();
        console.log('Decode Rex: ', decodeRexs); // /(&amp;|&lt;|&gt;|&quot;|&apos;)/g
        return str.replace(decodeRexs, function(m) { console.log('Decode M: ', m); return html.decodeMap[m]; }); // m = &lt; &quot; &gt;
    }
};

function swapJsonKeyValues ( json ) {
    var count = Object.keys( json ).length;
    var obj = {};
    var keys = '[', val = '(', keysCount = 1;
    for(var key in json) {
        if ( json.hasOwnProperty( key ) ) {
            obj[ json[ key ] ] = key;
            keys += key;
            if( keysCount < count ) {
                val += json[ key ]+'|';
            } else {
                val += json[ key ];
            }
            keysCount++;
        }
    }
    keys += ']';    val  += ')';
    console.log( keys, ' == ', val);
    mapkeys = keys;
    mapvalues = val;
    return obj;
}

console.log('Encode: ', html.encode('<input type="password" name="password" value=""/>') ); 
console.log('Decode: ', html.decode(html.encode('<input type="password" name="password" value=""/>')) );

O/P:
Encode:  &lt;input type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;/&gt;
Decode:  <input type="password" name="password" value=""/>

5voto

var htmlEntities = [
            {regex:/&/g,entity:'&amp;'},
            {regex:/>/g,entity:'&gt;'},
            {regex:/</g,entity:'&lt;'},
            {regex:/"/g,entity:'&quot;'},
            {regex:/á/g,entity:'&aacute;'},
            {regex:/é/g,entity:'&eacute;'},
            {regex:/í/g,entity:'&iacute;'},
            {regex:/ó/g,entity:'&oacute;'},
            {regex:/ú/g,entity:'&uacute;'}
        ];

total = <some string value>

for(v in htmlEntities){
    total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);
}

Une solution en réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X