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

Vous avez besoin d'une fonction qui fonctionne comme

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

Mais en tenant compte de votre désir de manipulation différente de guillemets simples / doubles.

La meilleure façon, à mon avis, est d'utiliser la fonctionnalité d'échographie HTML intégrée au navigateur pour gérer plusieurs des cas. Pour ce faire, créez simplement un élément dans l'arborescence DOM et définissez le innerText de l'élément dans votre chaîne. Ensuite, récupérez le innerHTML de l'élément. Le navigateur renverra une chaîne codée HTML.

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

Essai:

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

Sortie:

 &;'><" 

Cette méthode d'échappement de HTML est également utilisée par la bibliothèque Prototype JS différemment de l'exemple simplifié que j'ai donné.

Remarque: Vous devrez toujours échapper à des guillemets (double et simple). Vous pouvez utiliser l'une des méthodes décrites par d'autres ici.

Cette fonction générique code tous les caractères non alphabétiques à 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(''); } 

De Mozilla …

Notez que charCodeAt renverra toujours une valeur inférieure à 65 536. C'est parce que les points de code plus élevés sont représentés par une paire de pseudo-caractères "de substitution" (de valeur inférieure) qui sont utilisés pour comprendre le caractère réel. Pour ce faire, pour examiner ou reproduire le caractère complet pour les caractères individuels de la valeur 65 536 et plus haut, pour ces caractères, il est nécessaire de récupérer non seulement charCodeAt (i), mais aussi charCodeAt (i + 1) (comme pour l'examen / Reproduisant 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("✈"); 

Créer une fonction qui utilise le replace chaîne

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

 Fonction ConvChar (str) {
   C = {'<': '& lt;', '>': '& gt;', '&': '& amp;', '' ':' ',' '' '' '' '' '' ''
        '#': '& # 035;'  };
   Retourner str.replace (/ [<&> '"#] / g, fonction (s) {retour c [s];});
 }

 Alerte (ConvChar ('<- "- & -" -> - <- \' - # - \ '->'));

Résultat:

 & Lt; - & quot; - amp & amp; - & quot; - & gt; - & lt; - & # 039; - & # 035; - & # 039; - & gt;

Dans la balise testarea:

 <- "- & -" -> - <-'-# -'->

Si vous modifiez simplement un petit caractères dans un code long …

Dans une balise PRE – et dans la plupart des autres balises HTML – le texte brut d'un fichier batch qui utilise les caractères de redirection de sortie (<et>) cassera le HTML, mais voici mon conseil : tout se passe dans un élément TEXTAREA Casser le HTML, principalement parce que nous sommes à l'intérieur d'un contrôle instancié et traité par le système d'exploitation, et par conséquent, son contenu n'est pas analysé par le moteur HTML.

À titre d'exemple, dis-je, je veux souligner la syntaxe de mon fichier batch en utilisant javascript. Je colle simplement le code dans une zone de texte sans vous soucier des caractères réservés HTML et demandez au script de traiter la propriété innerHTML de la zone de texte, qui évalue le texte avec les caractères réservés HTML remplacés par leurs entités ISO-8859-1 correspondantes.

Les navigateurs échapperont automatiquement aux caractères spéciaux lorsque vous récupérerez la propriété innerHTML (et outerHTML ) d'un élément. En utilisant une zone de texte (et qui sait, peut-être une entrée de texte de type), il vous suffit de sauvegarder la conversion (manuellement ou via le code).

J'utilise cette astuce pour tester mon surligneur de syntaxe, et lorsque j'ai fini de créer et de tester, je cache simplement la zone de texte de la vue.

 function char_convert() { var chars = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","ü","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","'","Ï","ó","'","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"]; var codes = ["&copy;","&#219;","&reg;","&#158;","&#220;","&#159;","&#221;","&#36;","&#222;","&#37;","&#161;","&#223;","&#162;","&#224;","&#163;","&#225;","&Agrave;","&#164;","&#226;","&Aacute;","&#165;","&#227;","&Acirc;","&#166;","&#228;","&Atilde;","&#167;","&#229;","&Auml;","&#168;","&#230;","&Aring;","&#169;","&#231;","&AElig;","&#170;","&#232;","&Ccedil;","&#171;","&#233;","&Egrave;","&#172;","&#234;","&Eacute;","&#173;","&#235;","&Ecirc;","&#174;","&#236;","&Euml;","&#175;","&#237;","&Igrave;","&#176;","&#238;","&Iacute;","&#177;","&#239;","&Icirc;","&#178;","&#240;","&Iuml;","&#179;","&#241;","&ETH;","&#180;","&#242;","&Ntilde;","&#181;","&#243;","&Otilde;","&#182;","&#244;","&Ouml;","&#183;","&#245;","&Oslash;","&#184;","&#246;","&Ugrave;","&#185;","&#247;","&Uacute;","&#186;","&#248;","&Ucirc;","&#187;","&#249;","&Uuml;","&#64;","&#188;","&#250;","&Yacute;","&#189;","&#251;","&THORN;","&#128;","&#190;","&#252","&szlig;","&#191;","&#253;","&agrave;","&#130;","&#192;","&#254;","&aacute;","&#131;","&#193;","&#255;","&aring;","&#132;","&#194;","&aelig;","&#133;","&#195;","&ccedil;","&#134;","&#196;","&egrave;","&#135;","&#197;","&eacute;","&#136;","&#198;","&ecirc;","&#137;","&#199;","&euml;","&#138;","&#200;","&igrave;","&#139;","&#201;","&iacute;","&#140;","&#202;","&icirc;","&#203;","&iuml;","&#142;","&#204;","&eth;","&#205;","&ntilde;","&#206;","&ograve;","&#145;","&#207;","&oacute;","&#146;","&#208;","&ocirc;","&#147;","&#209;","&otilde;","&#148;","&#210;","&ouml;","&#149;","&#211;","&oslash;","&#150;","&#212;","&ugrave;","&#151;","&#213;","&uacute;","&#152;","&#214;","&ucirc;","&#153;","&#215;","&yacute;","&#154;","&#216;","&thorn;","&#155;","&#217;","&yuml;","&#156;","&#218;"]; for(x=0; x<chars.length; x++){ for (i=0; i<arguments.length; i++){ arguments[i].value = arguments[i].value.replace(chars[x], codes[x]); } } } char_convert(this); 

Comme l'a mentionné le dragon la façon la plus propre de le faire est avec jQuery :

 function HtmlEncode(s) { return $('<div>').text(s).html(); } function HtmlDecode(s) { return $('<div>').html(s).text(); } 

 var swapCodes = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 169, 61558, 8226, 61607); var swapStrings = new Array("--", "--", "'", "'", '"', '"', "*", "...", "&trade;", "&copy;", "&bull;", "&bull;", "&bull;"); var TextCheck = { doCWBind:function(div){ $(div).bind({ bind:function(){ TextCheck.cleanWord(div); }, focus:function(){ TextCheck.cleanWord(div); }, paste:function(){ TextCheck.cleanWord(div); } }); }, cleanWord:function(div){ var output = $(div).val(); for (i = 0; i < swapCodes.length; i++) { var swapper = new RegExp("\\u" + swapCodes[i].toString(16), "g"); output = output.replace(swapper, swapStrings[i]); } $(div).val(output); } } 

Un autre que nous utilisons maintenant fonctionne. Un ci-dessus, je l'ai appelé un script à la place et renvoie le code converti. Seulement bon sur les petites zones de texte (ce qui signifie pas un plein sur l'article / blog ect …)

Pour le dessus. Fonctionne sur la plupart des chars.

 var swapCodes = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 61558, 8226, 61607,161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 338, 339, 352, 353, 376, 402); var swapStrings = new Array("--", "--", "'", "'", '"', '"', "*", "...", "™", "•", "•", "•", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "­", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Š", "š", "Ÿ", "ƒ"); 

Je crée un fichier javascript qui a beaucoup de fonctionnalités, y compris celles ci-dessus. http://www.neotropicsolutions.com/JSChars.zip

Tous les fichiers sont inclus. J'ai ajouté jQuery 1.4.4. Tout simplement parce que j'ai vu des problèmes dans d'autres versions, pour les essayer.

 Requires: jQuery & jQuery Impromptu from: http://trentrichardson.com/Impromptu/index.php 1. Word Count 2. Character Conversion 3. Checks to ensure this is not passed: "notsomeverylongstringmissingspaces" 4. Checks to make sure ALL IS NOT ALL UPPERCASE. 5. Strip HTML // Word Counter $.getScript('js/characters.js',function(){ $('#adtxt').bind("keyup click blur focus change paste", function(event){ TextCheck.wordCount(30, "#adtxt", "#adtxt_count", event); }); $('#adtxt').blur( function(event){ TextCheck.check_length('#adtxt'); // unsures properly spaces-not one long word TextCheck.doCWBind('#adtxt');// char conversion }); TextCheck.wordCount(30, "#adtxt", "#adtxt_count", false); }); //HTML <textarea name="adtxt" id="adtxt" rows="10" cols="70" class="wordCount"></textarea> <div id="adtxt_count" class="clear"></div> // Just Character Conversions: TextCheck.doCWBind('#myfield'); // Run through form fields in a form for case checking. // Alerts user when field is blur'd. var labels = new Array("Brief Description","Website URL","Contact Name","Website","Email","Linkback URL"); var checking = new Array("descr","title","fname","website","email","linkback"); TextCheck.check_it(checking,labels); // Extra security to check again, make sure form is not submitted var pass = TextCheck.validate(checking,labels); if(pass){ //do form actions } //Strip HTML <textarea name="adtxt" id="adtxt" rows="10" cols="70" onblur="TextCheck.stripHTML(this);"></textarea> 

Une solution de contournement:

var temp = $("div").text("<"); var afterEscape = temp.html(); // afterEscape == "&lt;"

  <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>html</title> <script> $(function() { document.getElementById('test').innerHTML = "&amp;"; }); </script> </head> <body> <div id="test"></div> </body> </html> 

Vous pouvez simplement convertir des caractères spéciaux en html en utilisant le code ci-dessus.

Voici quelques méthodes que j'utilise sans avoir besoin de Jquery:

Vous pouvez coder tous les caractères de votre chaîne:

 function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})} 

Ou cibler uniquement les principaux personnages de codage sûrs à s'inquiéter (&, inebreaks, <,>, et ') comme:

 function encode(r){ return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"}) } test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!'); /************* * \x26 is &ampersand (it has to be first), * \x0A is newline, *************/ 

 <textarea id=test rows="9" cols="55">www.WHAK.com</textarea> 

 function escape (text) { return text.replace(/[<>\&\"\']/g, function(c) { return '&#' + c.charCodeAt(0) + ';'; }); } alert(escape("<>&'\"")); 

Cela ne répond pas directement à votre question, mais si vous utilisez innerHTML pour écrire du texte dans un élément et que vous rencontrez des problèmes de codage, utilisez simplement le textContent texte, c'est-à-dire:

 var s = "Foo 'bar' baz <qux>"; var element = document.getElementById('foo'); element.textContent = s; // <div id="foo">Foo 'bar' baz <qux></div> 

Voici une bonne bibliothèque que j'ai trouvée très utile dans ce contexte.

https://github.com/mathiasbynens/he

Selon son auteur:

Il prend en charge toutes les références de caractères nominatives normalisées selon HTML, gère des mots d'ordre ambigus et d'autres cas de bord, tout comme un navigateur, possède une suite de test étendue et, contrairement à beaucoup d'autres solutions JavaScript, il gère les symboles astrales Unicode simplement

Si vous avez besoin de support pour toutes les références de caractères standardisées nommées , unicode et les mots d'ordre ambigus , la bibliothèque est la seule solution 100% fiable dont je suis conscient!

Exemple d'utilisation

 he.encode('foo © bar ≠ baz 𝌆 qux'); // Output : 'foo © bar ≠ baz 𝌆 qux' he.decode('foo © bar ≠ baz 𝌆 qux'); // Output : 'foo © bar ≠ baz 𝌆 qux' 

 <html> <body> <script type="text/javascript"> var str= "&\"'<>"; alert('B4 Change:\n' + str); str= str.replace(/\&/g,'&amp;'); str= str.replace(/</g,'&lt;'); str= str.replace(/>/g,'&gt;'); str= str.replace(/\"/g,'&quot;'); str= str.replace(/\'/g,'&#039;'); alert('After change:\n' + str); </script> </body> </html> 

Utilisez ceci pour tester: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

Oui, mais si vous devez insérer la chaîne résultante quelque part sans qu'elle soit reconvertie, vous devez:

 str.replace(/'/g,"'"); // and so on 

Voir JavaScript htmlentities http://phpjs.org/functions/htmlentities:425

 public static string HtmlEncode (string text) { string result; using (StringWriter sw = new StringWriter()) { var x = new HtmlTextWriter(sw); x.WriteEncodedText(text); result = sw.ToString(); } return result; } 

Utilisez la fonction javaScript escape () , qui vous permet d'encoder des chaînes.

par exemple,

 escape("yourString");