Converti caratteri speciali in HTML in Javascript

Qualcuno sa come convertire i caratteri speciali in HTMLin Javascript?

Esempio:

• &(e commerciale) diventa &amp.
• "(virgolette doppie) diventa &quotquando ENT_NOQUOTESnon è impostato.
• '(virgoletta singola) diventa &#039solo quando ENT_QUOTESè impostato.
• <(minore di) diventa &lt.
• >(maggiore di) diventa &gt.

Hai bisogno di una funzione che faccia qualcosa di simile

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

Ma tenendo conto del tuo desiderio di una gestione diversa delle virgolette singole / doppie.

Il modo migliore secondo me è utilizzare la funzionalità di escape HTML incorporata nel browser per gestire molti dei casi. Per fare questo, crea semplicemente un elemento nell'albero DOM e imposta innerTextl'elemento della tua stringa. Quindi recupera innerHTMLl'elemento dell'elemento. Il browser restituirà una stringa codificata HTML.

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

Prova:

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

Produzione:

&;'><"

Questo metodo per eseguire l'escape dell'HTML viene utilizzato anche dalla libreria Prototype JS sebbene in modo diverso dall'esempio semplicistico che ho fornito.

Nota: dovrai comunque eseguire l'escape delle virgolette (doppie e singole) da solo. Puoi utilizzare uno qualsiasi dei metodi descritti da altri qui.

Questa funzione generica codifica ogni carattere non alfabetico nel suo codice html (numerico):

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

Da Mozilla ...

Tieni presente che charCodeAt restituirà sempre un valore inferiore a 65.536. Questo perché i punti di codice più alti sono rappresentati da una coppia di pseudo-caratteri "surrogati" (di valore inferiore) utilizzati per comprendere il carattere reale. Per questo motivo, per esaminare o riprodurre il carattere completo per i singoli caratteri di valore 65.536 e superiore, per tali caratteri, è necessario recuperare non solo charCodeAt (i), ma anche charCodeAt (i + 1) (come se si esaminasse / riproducendo una stringa con due> lettere).

La migliore soluzione

/**
 * (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;
}

Esempio di utilizzo:

html_encode("✈");

Crea una funzione che usa string 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;
}

Per coloro che vogliono decodificare un codice carattere intero come &#xxx;all'interno di una stringa, utilizzare questa funzione:

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

Come è stato detto dal dragonmodo più pulito per farlo è con 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, function (s) {return c [s];});
}

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

Risultato:

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

Nel tag testarea:

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

Se cambierai solo un po 'di caratteri nel codice lungo ...

In un PREtag -e nella maggior parte degli altri tag HTML- il testo semplice per un file batch che utilizza i caratteri di reindirizzamento dell'output (<e>) interromperà l'HTML, ma ecco il mio suggerimento : tutto va bene in un TEXTAREAelemento -non interromperà il HTML, principalmente perché siamo all'interno di un controllo istanziato e gestito dal sistema operativo, e quindi il suo contenuto non viene analizzato dal motore HTML.

Ad esempio, diciamo che voglio evidenziare la sintassi del mio file batch utilizzando javascript. Incollo semplicemente il codice in una textarea senza preoccuparmi dei caratteri riservati HTML e faccio in modo che lo script elabori la innerHTMLproprietà della textarea, che restituisce il testo con i caratteri riservati HTML sostituiti dalle corrispondenti entità ISO-8859-1.

I browser evaderanno automaticamente i caratteri speciali quando recupererai il file innerHTMLouterHTML proprietà (e ) di un elemento. Usare una textarea (e chissà, magari un input di tipo text) ti evita semplicemente di fare la conversione (manualmente o tramite codice).

Uso questo trucco per testare il mio evidenziatore di sintassi e quando ho finito di creare e testare, nascondo semplicemente l'area di testo alla vista.

Se hai bisogno di supporto per tutti i riferimenti a caratteri con nome standardizzati , unicode e e commerciali ambigue , la libreria he è l'unica soluzione affidabile al 100% di cui sono a conoscenza!

Uso di esempio

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

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

una soluzione alternativa:

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 altro che usiamo ora che funziona. Uno sopra ho invece chiamato uno script e restituisce il codice convertito. Buono solo su piccole aree di testo (il che significa non un articolo completo / blog ecc ...)

Per sopra. Funziona sulla maggior parte dei caratteri.

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("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "•", "•", "•", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "­", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Š", "š", "Ÿ", "ƒ");

Creo un file javascript che ha molte funzionalità comprese quelle sopra. http://www.neotropicsolutions.com/JSChars.zip

Tutti i file necessari sono inclusi. Ho aggiunto jQuery 1.4.4. Semplicemente perché ho riscontrato problemi in altre versioni, ma per provarli.

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>

puoi semplicemente convertire caratteri speciali in html usando il codice sopra.

Ecco una buona libreria che ho trovato molto utile in questo contesto.

https://github.com/mathiasbynens/he

Secondo il suo autore:

Supporta tutti i riferimenti a caratteri con nome standardizzati come da HTML, gestisce e commerciali ambigue e altri casi limite proprio come farebbe un browser, ha una vasta suite di test e, contrariamente a molte altre soluzioni JavaScript, gestisce perfettamente i simboli Unicode astrali

Ecco un paio di metodi che uso senza bisogno di Jquery:

Puoi codificare ogni carattere nella tua stringa:

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

Oppure scegli come target i principali caratteri di codifica sicura di cui preoccuparti (&, inebreaks, <,>, "e ') come:

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("<>&'\""));

Questo non risponde direttamente alla tua domanda, ma se stai usando innerHTMLper scrivere testo all'interno di un elemento e hai riscontrato problemi di codifica, usa semplicemente textContent, cioè:

var s = "Foo 'bar' baz <qux>";

var element = document.getElementById('foo');
element.textContent = s;

// <div id="foo">Foo 'bar' baz <qux></div>

Possiamo usare javascript DOMParserper la conversione di caratteri speciali.

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

Di seguito è riportata la semplice funzione per codificare i caratteri di escape xml in JS

Encoder.htmlEncode (unsafeText);

Puoi risolverlo sostituendo la funzione .text () con .html (). sta funzionando per me.

<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>      

usalo per testare: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

Sì, ma se devi inserire la stringa risultante da qualche parte senza che venga riconvertita, devi fare:

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

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

Usa la funzione javaScript escape () , che ti consente di codificare le stringhe.

per esempio,

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;

}