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

Est-ce que quelqu'un sait comment convertir des caractères spéciaux HTMLen Javascriptpo?

Exemple:

• &(esperluette) devient &amp.
• "(guillemets doubles) devient &quotquand ENT_NOQUOTESn'est pas défini.
• '(guillemet simple) devient &#039uniquement lorsque ENT_QUOTESest défini.
• <(inférieur à) devient &lt.
• >(supérieur à) devient &gt.

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 désir de gérer différemment les guillemets simples / doubles.

Le meilleur moyen à mon avis est d'utiliser la fonctionnalité d'échappement HTML intégrée du navigateur pour gérer la plupart des cas. Pour ce faire, créez simplement un élément dans l'arborescence DOM et définissez le innerTextde l'élément sur votre chaîne. Récupérez ensuite le innerHTMLde l'élément. Le navigateur renverra une chaîne codée en HTML.

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

Essai:

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

Production:

&;'><"

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

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

Cette fonction générique encode chaque caractère non alphabétique en 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 retournera toujours une valeur inférieure à 65 536. Ceci est dû au 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 comprendre 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 65536 et plus, pour ces caractères, il est nécessaire de récupérer non seulement charCodeAt (i), mais aussi charCodeAt (i + 1) (comme si vous examiniez / 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 une chaîne 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;
}

Pour ceux qui veulent décoder un code de caractère entier comme &#xxx;dans une chaîne, utilisez cette fonction:

function decodeHtmlCharCodes(str) { 
  return str.replace(/(&#(\d+);)/g, function(match, capture, charCode) {
    return String.fromCharCode(charCode);
  });
}

// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int’l reputation’!'));

ES6

const decodeHtmlCharCodes = str => 
  str.replace(/(&#(\d+);)/g, (match, capture, charCode) => 
    String.fromCharCode(charCode));

// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int’l reputation’!'));

function char_convert() {

    var chars = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","ü","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"]; 
    var codes = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","&#252","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"];

    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 cela a été mentionné par dragonla façon la plus propre de le faire, c'est avec jQuery:

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

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

function ConvChar (str) {
  c = {'<': '& lt;', '>': '& gt;', '&': '& amp;', '"': '& quot;'," '":' & # 039; ',
       '#': '& # 035;' };
  return str.replace (/ [<&> '"#] / g, fonction (s) {return c [s];});
}

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

Résultat:

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

Dans le tag testarea:

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

Si vous changez juste un peu de caractères dans le code long ...

Dans une PREbalise - et dans la plupart des autres balises HTML - du texte brut pour un fichier batch qui utilise les caractères de redirection de sortie (<et>) cassera le HTML, mais voici mon conseil : tout ce qui se passe dans un TEXTAREAélément -il ne cassera pas le HTML, principalement parce que nous sommes à l'intérieur d'un contrôle instancié et manipulé par l'OS, et donc que son contenu n'est pas analysé par le moteur HTML.

À titre d'exemple, disons que je veux mettre en évidence la syntaxe de mon fichier de commandes en utilisant javascript. Je colle simplement le code dans une zone de texte sans me soucier des caractères réservés HTML, et demande au script de traiter leinnerHTML propriété 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 échappent automatiquement aux caractères spéciaux lorsque vous récupérez la propriété innerHTML(et outerHTML) d'un élément. L'utilisation d'une zone de texte (et qui sait, peut-être une entrée de type texte) vous évite simplement de faire la conversion (manuellement ou par code).

J'utilise cette astuce pour tester mon surligneur de syntaxe, et lorsque j'ai terminé la création et le test, je masque simplement la zone de texte de la vue.

Si vous avez besoin de support pour toutes les références de caractères nommés standardisées , unicode et esperluettes ambiguës , la bibliothèque he est la seule solution fiable à 100% à ma connaissance!

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'

une solution de contournement:

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

var swapCodes   = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 169, 61558, 8226, 61607);
var swapStrings = new Array("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "©", "•", "•", "•");

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 qui fonctionne. Un ci-dessus, je le fais appeler un script à la place et renvoie le code converti. Seulement bon sur les petites zones de texte (ce qui signifie pas un article / blog complet ect ...)

Pour ci-dessus. Fonctionne sur la plupart des caractères.

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 nécessaires sont inclus. J'ai ajouté jQuery 1.4.4. Tout simplement parce que j'ai vu des problèmes dans d'autres versions, je ne les ai pas encore essayés.

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>

 <!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 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 nommés standardisés selon HTML, gère les esperluettes ambiguës et autres cas de bord comme le ferait un navigateur, dispose d'une suite de tests étendue et - contrairement à de nombreuses autres solutions JavaScript - il gère très bien les symboles Unicode astraux.

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

Vous pouvez encoder chaque caractère de votre chaîne:

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

Ou ciblez simplement les principaux caractères d'encodage sécurisés dont vous devez vous soucier (&, 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 innerHTMLpour écrire du texte dans un élément et que vous avez rencontré des problèmes d'encodage, utilisez simplement textContent, 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>

Nous pouvons utiliser javascript DOMParserpour la conversion des caractères spéciaux.

const parser = new DOMParser();
const convertedValue = (parser.parseFromString("&#039 &amp &#039 &lt &gt", "application/xml").body.innerText;

Voici la fonction simple pour encoder les caractères d'échappement XML dans JS

Encoder.htmlEncode (unsafeText);

Vous pouvez résoudre ce problème en remplaçant la fonction .text () par .html (). ça marche pour moi.

<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 la reconvertir, vous devez faire:

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

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

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

par exemple,

escape("yourString");

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;

}