unescape - javascript html entities to utf 8

Convierta caracteres especiales a HTML en Javascript

Question

¿Alguien sabe cómo convertir caracteres especiales a HTML en Javascript ?

Ejemplo:

• & (ampersand) se convierte en &amp .
• " (comillas dobles) se convierte en &quot cuando ENT_NOQUOTES no está configurado.
• '' (comilla simple) se convierte en &#039 solo cuando se establece ENT_QUOTES .
• < (menos que) se convierte en &lt .
• > (mayor que) se convierte en &gt .

Answer 1

Aquí hay un par de métodos que uso sin la necesidad de Jquery:

Puedes codificar todos los caracteres de tu cadena:

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

O simplemente apunte a los principales caracteres de codificación segura de los que preocuparse (&, inebreaks, <,>, "y '') como:

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>

Answer 2

Aquí hay una buena biblioteca que he encontrado muy útil en este contexto.

he

De acuerdo con su autor:

Admite todas las referencias de caracteres con nombre estandarizado según HTML, maneja símbolos ambiguos y otros casos extremos como lo haría un navegador, cuenta con un amplio conjunto de pruebas y, a diferencia de muchas otras soluciones de JavaScript, maneja muy bien los símbolos unicode astrales.

Answer 3

Como fue mencionado por dragon la forma más limpia de hacerlo es con jQuery :

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

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

Answer 4

Crear una función que use cadena 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 ...

Tenga en cuenta que charCodeAt siempre devolverá un valor inferior a 65.536. Esto se debe a que los puntos de código más altos están representados por un par de pseudo caracteres "suplentes" (valorados más bajo) que se utilizan para comprender el carácter real. Debido a esto, para examinar o reproducir el carácter completo para caracteres individuales de valor 65.536 y superior, para dichos caracteres, es necesario recuperar no solo charCodeAt (i), sino también charCodeAt (i + 1) (como si examinara / reproduciendo una cadena con dos> letras).

La mejor solucion

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

Ejemplo de uso:

html_encode("✈");

Answer 6

En una etiqueta PRE y en la mayoría de las demás etiquetas HTML, el texto sin formato para un archivo por lotes que usa los caracteres de redirección de salida (<y>) romperá el HTML, pero este es mi consejo : todo va en un elemento TEXTAREA ; no lo hará rompe el HTML, principalmente porque estamos dentro de un control instanciado y manejado por el sistema operativo, y por lo tanto su contenido no está siendo analizado por el motor HTML.

Como ejemplo, digamos que quiero resaltar la sintaxis de mi archivo por lotes usando javascript. Simplemente pego el código en un área de texto sin preocuparme por los caracteres reservados HTML, y hago que el script procese la propiedad innerHTML del área de texto, que evalúa el texto con los caracteres reservados HTML reemplazados por sus correspondientes entidades ISO-8859-1.

Los navegadores escaparán automáticamente de los caracteres especiales cuando recupere la propiedad innerHTML (y outerHTML ) de un elemento. El uso de un área de texto (y quién sabe, tal vez una entrada de tipo de texto) simplemente le evita hacer la conversión (manualmente o mediante código).

Utilizo este truco para probar mi resaltador de sintaxis, y cuando termino de autorizar y probar, simplemente oculto el área de texto de la vista.

Answer 7

Esta función genérica codifica cada carácter no alfabético en su htmlcode (numérico):

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 8

Esto no responde directamente a su pregunta, pero si usa innerHTML para escribir texto dentro de un elemento y se encuentra con problemas de codificación, solo use textContent , es decir:

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

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

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

Answer 9

La mejor manera en mi opinión es utilizar la funcionalidad de escape HTML incorporada del navegador para manejar muchos de los casos. Para hacer esto simplemente cree un elemento en el árbol DOM y establezca el texto innerText del elemento en su cadena. Luego recupera el innerHTML del elemento. El navegador devolverá una cadena codificada en HTML.

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

Prueba de funcionamiento:

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

Salida:

&;''><"

Este método de escaparse de HTML también lo usa la biblioteca Prototype JS, aunque de manera diferente a la muestra simplista que he dado.

Nota: Aún necesitará evadir las comillas (dobles e individuales) usted mismo. Puede usar cualquiera de los métodos descritos por otros aquí.

Answer 10

Necesitas una función que haga algo como

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

Pero teniendo en cuenta su deseo de un manejo diferente de las comillas simples / dobles.

Answer 11

Sí, pero si necesita insertar la cadena resultante en algún lugar sin que se vuelva a convertir, debe hacer:

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

Answer 12

Si necesita soporte para todas las referencias de caracteres con nombre estandarizado , unicode únicos y ambiguos , ¡la biblioteca es la única solución 100% confiable que conozco!

Ejemplo de uso

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

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

Answer 13

Use la función javaScript escape() , que le permite codificar cadenas.

p.ej,

escape("yourString");

Answer 14

Ver las características de JavaScript http://phpjs.org/functions/htmlentities:425

Answer 15

una solución alternativa:

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

Answer 16

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

Resultado:

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

En la etiqueta de testarea:

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

Si solo cambias un poco de caracteres en código largo ...

Answer 17

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

simplemente puede convertir caracteres especiales a html usando el código anterior.

Answer 18

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

use esto para probar: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

Answer 19

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

Answer 20

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

alert(escape("<>&''/""));

Answer 21

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;

}

Answer 22

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

Otra que usamos ahora que funciona. Uno arriba lo tengo llamando a un script en su lugar y devuelve el código convertido. Solo es bueno en pequeñas áreas de texto (lo que significa que no está completo en el artículo / blog ect ...)

Por encima. Funciona en la mayoría de los caracteres.

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 archivo javascript que tiene mucha funcionalidad, incluido el anterior. http://www.neotropicsolutions.com/JSChars.zip

Todos los archivos necesarios están incluidos. Agregué jQuery 1.4.4. Simplemente porque vi problemas en otras versiones, aún para probarlos.

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>