funciona - Codificar entidades html en javascript

javascript pdf

Question

Estoy trabajando en un CMS que permite a los usuarios ingresar contenido. El problema es que cuando agregan símbolos ® , es posible que no se muestre bien en todos los navegadores. Me gustaría configurar una lista de símbolos que se deben buscar y luego convertir a la entidad html correspondiente. Por ejemplo

® => ®
& => &
© => ©
™ => ™

Después de la conversión, debe estar envuelto en una etiqueta <sup> , lo que da como resultado:

® => <sup>&reg;</sup>

Debido a que es necesario un tamaño de fuente y un estilo de relleno en particular:

sup { font-size: 0.6em; padding-top: 0.2em; }

¿Sería el JavaScript algo como esto?

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([?]);
}

Donde "[?]" Significa que hay algo de lo que no estoy seguro.

Detalles adicionales:

• Me gustaría hacer esto con JavaScript puro, no algo que requiera una biblioteca como jQuery, gracias.
• Backend es Ruby
• Usando RefineryCMS que está construido con Ruby on Rails

Answer 1

Caracteres especiales HTML y sus ESCAPE CODES

Los caracteres reservados se deben escapar mediante HTML: podemos usar un escape de caracteres para representar cualquier carácter Unicode [Ejemplo: & - U + 00026] en HTML, XHTML o XML utilizando solo caracteres ASCII. Referencias numéricas de caracteres [ Ex: signo & (&) - & ] Y referencias de caracteres nombrados [Ejemplo: & ] son ​​tipos de character escape used in markup de character escape used in markup .

Entidades predefinidas

Reemplazo numérico XML de reemplazo de entidad XML de caracteres originales
< & lt; & # 60;
> & gt; & # 62;
" & quot; & # 34;
& amp; & # 38;
'' & apos; & # 39;

Para mostrar etiquetas HTML como un formulario normal en una página web, usamos etiquetas <pre> , <code> o podemos escapar de ellas. Escapar de la cadena reemplazando con cualquier aparición del carácter "&" por la cadena "&" y cualquier ocurrencia del caracter ">" por la cadena ">" . stackoverflow post : stackoverflow post

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

var mapkeys = '''', mapvalues = '''';
var html = {
    encodeRex : function () {
        return  new RegExp(mapkeys, ''gm'');
    }, 
    decodeRex : function () {
        return  new RegExp(mapvalues, ''gm'');
    },
    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ),
    decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),
    encode : function ( str ) {
        return str.replace(html.encodeRex(), function(m) { return html.encodeMap[m]; });
    },
    decode : function ( str ) {
        return str.replace(html.decodeRex(), function(m) { return html.decodeMap[m]; });
    }
};

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=""/>

Answer 2

A veces solo quieres codificar cada carácter ... Esta función reemplaza "todo menos nada" en regxp.

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

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

test.value=encode(document.body.innerHTML.trim());

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

Answer 3

Puede usar el método charCodeAt() para verificar si el carácter especificado tiene un valor superior a 127 y convertirlo a una referencia de carácter numérico usando toString(16) .

Answer 4

Puede usar regex para reemplazar cualquier carácter en un rango Unicode dado con su equivalente de entidad html. El código se vería así:

var encodedStr = rawStr.replace(/[/u00A0-/u9999<>/&]/gim, function(i) {
   return ''&#''+i.charCodeAt(0)+'';'';
});

Este código reemplazará a todos los caracteres en el rango dado (Unicode 00A0 - 9999, así como ampersand, mayor y menor que) con sus equivalentes de entidad html, que es simplemente &#nnn; donde nnn es el valor unicode que obtenemos de charCodeAt .

Véalo en acción aquí: http://jsfiddle.net/E3EqX/13/ (este ejemplo usa jQuery para los selectores de elementos utilizados en el ejemplo. El código base en sí mismo, arriba, no usa jQuery)

Hacer estas conversiones no resuelve todos los problemas: asegúrese de que está usando la codificación de caracteres UTF8, asegúrese de que su base de datos esté almacenando las cadenas en UTF8. Todavía puede ver instancias en las que los caracteres no se muestran correctamente, dependiendo de la configuración de la fuente del sistema y otros asuntos fuera de su control.

Documentación

• String.charCodeAt - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
• Entidades de caracteres HTML - http://www.chucke.com/entities.html

Answer 5

Puedes usar esto

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

Answer 6

Si desea evitar codificar entidades html más de una vez

function encodeHTML(str){
    return str.replace(/[/u00A0-/u9999<>&](?!#)/gim, function(i) {
      return ''&#'' + i.charCodeAt(0) + '';'';
    });
}

function decodeHTML(str){
    return str.replace(/&#([0-9]{1,3});/gi, function(match, num) {
        return String.fromCharCode(parseInt(num));
    });
}

Ejemplo

var text = "<a>Content</a>";

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

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

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

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

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

// <a>Content</a>

Answer 7

Si ya está usando jQuery, intente con html() .

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

Se crea una instancia de un nodo de texto en memoria y se llama a html() .

Es feo, desperdicia un poco de memoria, y no tengo idea si es tan completo como algo parecido a la biblioteca, pero si ya usas jQuery, tal vez esta sea una opción para ti.

Tomado de la publicación del blog Codifique las entidades HTML con jQuery por Felix Geisendörfer.

Answer 8

Sin ninguna biblioteca, si no necesita soportar IE <9, podría crear un elemento html y establecer su contenido con Node.textContent :

var str = "<this is not a tag>";
var p = document.createElement("p");
p.textContent = str;
var converted = p.innerHTML;

Aquí hay un ejemplo: https://jsfiddle.net/1erdhehv/

Answer 9

Tuve el mismo problema y creé 2 funciones para crear entidades y traducirlas a caracteres normales. Los siguientes métodos traducen cualquier cadena a entidades HTML y viceversa en el prototipo de cadena

/**
 * Convert a string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
    return this.replace(/./gm, function(s) {
        return "&#" + s.charCodeAt(0) + ";";
    });
};

/**
 * Create string from HTML entities
 */
String.fromHtmlEntities = function(string) {
    return (string+"").replace(/&#/d+;/gm,function(s) {
        return String.fromCharCode(s.match(//d+/gm)[0]);
    })
};

Luego puede usarlo de la siguiente manera:

var str = "Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

Salida en la consola:

Entities: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést
String: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést 

Answer 10

La respuesta actualmente aceptada tiene varios problemas. Esta publicación los explica y ofrece una solución más sólida. La solución sugerida en esa respuesta es:

var encodedStr = rawStr.replace(/[/u00A0-/u9999<>/&]/gim, function(i) {
  return ''&#'' + i.charCodeAt(0) + '';'';
});

La bandera i es redundante ya que ningún símbolo Unicode en el rango de U + 00A0 a U + 9999 tiene una variante en mayúscula / minúscula que está fuera de ese mismo rango.

La bandera m es redundante porque ^ o $ no se usan en la expresión regular.

¿Por qué el rango U + 00A0 a U + 9999? Parece arbitrario.

De todos modos, para una solución que codifica correctamente todos los símbolos ASCII excepto seguros e imprimibles (incluidos los símbolos astrales) e implementa todas las referencias de caracteres nombrados (no solo los de HTML4), utilice la biblioteca (descargo de responsabilidad: Esta biblioteca es mía ) De su LÉAME:

él (para "entidades HTML") es un codificador / decodificador robusto de entidad HTML escrito en JavaScript. 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 , tiene un amplio conjunto de pruebas y, a diferencia de muchas otras soluciones de JavaScript , maneja muy bien los símbolos Unicode astrales. Una demostración en línea está disponible.

Consulte también esta respuesta relevante de desbordamiento de pila .

Answer 11

var htmlEntities = [
            {regex:/&/g,entity:''&''},
            {regex:/>/g,entity:''>''},
            {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);
}

Una solución de matriz