Saltar al contenido

Cómo convertir caracteres a entidades HTML usando JavaScript simple

Nuestro equipo de redactores ha estado horas investigando para dar resolución a tu búsqueda, te brindamos la respuesta y esperamos serte de gran apoyo.

Solución:

Con la ayuda de bucabay y los consejos para crear mi propia función, creé esta que me funciona. ¿Qué piensan ustedes, hay una mejor solución en alguna parte?

if(typeof escapeHtmlEntities == 'undefined') 
        escapeHtmlEntities = function (text) 
            return text.replace(/[u00A0-u2666<>&]/g, function(c) );
        ;

        // all HTML4 entities as defined here: http://www.w3.org/TR/html4/sgml/entities.html
        // added: amp, lt, gt, quot and apos
        escapeHtmlEntities.entityTable = 
            34 : 'quot', 
            38 : 'amp', 
            39 : 'apos', 
            60 : 'lt', 
            62 : 'gt', 
            160 : 'nbsp', 
            161 : 'iexcl', 
            162 : 'cent', 
            163 : 'pound', 
            164 : 'curren', 
            165 : 'yen', 
            166 : 'brvbar', 
            167 : 'sect', 
            168 : 'uml', 
            169 : 'copy', 
            170 : 'ordf', 
            171 : 'laquo', 
            172 : 'not', 
            173 : 'shy', 
            174 : 'reg', 
            175 : 'macr', 
            176 : 'deg', 
            177 : 'plusmn', 
            178 : 'sup2', 
            179 : 'sup3', 
            180 : 'acute', 
            181 : 'micro', 
            182 : 'para', 
            183 : 'middot', 
            184 : 'cedil', 
            185 : 'sup1', 
            186 : 'ordm', 
            187 : 'raquo', 
            188 : 'frac14', 
            189 : 'frac12', 
            190 : 'frac34', 
            191 : 'iquest', 
            192 : 'Agrave', 
            193 : 'Aacute', 
            194 : 'Acirc', 
            195 : 'Atilde', 
            196 : 'Auml', 
            197 : 'Aring', 
            198 : 'AElig', 
            199 : 'Ccedil', 
            200 : 'Egrave', 
            201 : 'Eacute', 
            202 : 'Ecirc', 
            203 : 'Euml', 
            204 : 'Igrave', 
            205 : 'Iacute', 
            206 : 'Icirc', 
            207 : 'Iuml', 
            208 : 'ETH', 
            209 : 'Ntilde', 
            210 : 'Ograve', 
            211 : 'Oacute', 
            212 : 'Ocirc', 
            213 : 'Otilde', 
            214 : 'Ouml', 
            215 : 'times', 
            216 : 'Oslash', 
            217 : 'Ugrave', 
            218 : 'Uacute', 
            219 : 'Ucirc', 
            220 : 'Uuml', 
            221 : 'Yacute', 
            222 : 'THORN', 
            223 : 'szlig', 
            224 : 'agrave', 
            225 : 'aacute', 
            226 : 'acirc', 
            227 : 'atilde', 
            228 : 'auml', 
            229 : 'aring', 
            230 : 'aelig', 
            231 : 'ccedil', 
            232 : 'egrave', 
            233 : 'eacute', 
            234 : 'ecirc', 
            235 : 'euml', 
            236 : 'igrave', 
            237 : 'iacute', 
            238 : 'icirc', 
            239 : 'iuml', 
            240 : 'eth', 
            241 : 'ntilde', 
            242 : 'ograve', 
            243 : 'oacute', 
            244 : 'ocirc', 
            245 : 'otilde', 
            246 : 'ouml', 
            247 : 'divide', 
            248 : 'oslash', 
            249 : 'ugrave', 
            250 : 'uacute', 
            251 : 'ucirc', 
            252 : 'uuml', 
            253 : 'yacute', 
            254 : 'thorn', 
            255 : 'yuml', 
            402 : 'fnof', 
            913 : 'Alpha', 
            914 : 'Beta', 
            915 : 'Gamma', 
            916 : 'Delta', 
            917 : 'Epsilon', 
            918 : 'Zeta', 
            919 : 'Eta', 
            920 : 'Theta', 
            921 : 'Iota', 
            922 : 'Kappa', 
            923 : 'Lambda', 
            924 : 'Mu', 
            925 : 'Nu', 
            926 : 'Xi', 
            927 : 'Omicron', 
            928 : 'Pi', 
            929 : 'Rho', 
            931 : 'Sigma', 
            932 : 'Tau', 
            933 : 'Upsilon', 
            934 : 'Phi', 
            935 : 'Chi', 
            936 : 'Psi', 
            937 : 'Omega', 
            945 : 'alpha', 
            946 : 'beta', 
            947 : 'gamma', 
            948 : 'delta', 
            949 : 'epsilon', 
            950 : 'zeta', 
            951 : 'eta', 
            952 : 'theta', 
            953 : 'iota', 
            954 : 'kappa', 
            955 : 'lambda', 
            956 : 'mu', 
            957 : 'nu', 
            958 : 'xi', 
            959 : 'omicron', 
            960 : 'pi', 
            961 : 'rho', 
            962 : 'sigmaf', 
            963 : 'sigma', 
            964 : 'tau', 
            965 : 'upsilon', 
            966 : 'phi', 
            967 : 'chi', 
            968 : 'psi', 
            969 : 'omega', 
            977 : 'thetasym', 
            978 : 'upsih', 
            982 : 'piv', 
            8226 : 'bull', 
            8230 : 'hellip', 
            8242 : 'prime', 
            8243 : 'Prime', 
            8254 : 'oline', 
            8260 : 'frasl', 
            8472 : 'weierp', 
            8465 : 'image', 
            8476 : 'real', 
            8482 : 'trade', 
            8501 : 'alefsym', 
            8592 : 'larr', 
            8593 : 'uarr', 
            8594 : 'rarr', 
            8595 : 'darr', 
            8596 : 'harr', 
            8629 : 'crarr', 
            8656 : 'lArr', 
            8657 : 'uArr', 
            8658 : 'rArr', 
            8659 : 'dArr', 
            8660 : 'hArr', 
            8704 : 'forall', 
            8706 : 'part', 
            8707 : 'exist', 
            8709 : 'empty', 
            8711 : 'nabla', 
            8712 : 'isin', 
            8713 : 'notin', 
            8715 : 'ni', 
            8719 : 'prod', 
            8721 : 'sum', 
            8722 : 'minus', 
            8727 : 'lowast', 
            8730 : 'radic', 
            8733 : 'prop', 
            8734 : 'infin', 
            8736 : 'ang', 
            8743 : 'and', 
            8744 : 'or', 
            8745 : 'cap', 
            8746 : 'cup', 
            8747 : 'int', 
            8756 : 'there4', 
            8764 : 'sim', 
            8773 : 'cong', 
            8776 : 'asymp', 
            8800 : 'ne', 
            8801 : 'equiv', 
            8804 : 'le', 
            8805 : 'ge', 
            8834 : 'sub', 
            8835 : 'sup', 
            8836 : 'nsub', 
            8838 : 'sube', 
            8839 : 'supe', 
            8853 : 'oplus', 
            8855 : 'otimes', 
            8869 : 'perp', 
            8901 : 'sdot', 
            8968 : 'lceil', 
            8969 : 'rceil', 
            8970 : 'lfloor', 
            8971 : 'rfloor', 
            9001 : 'lang', 
            9002 : 'rang', 
            9674 : 'loz', 
            9824 : 'spades', 
            9827 : 'clubs', 
            9829 : 'hearts', 
            9830 : 'diams', 
            338 : 'OElig', 
            339 : 'oelig', 
            352 : 'Scaron', 
            353 : 'scaron', 
            376 : 'Yuml', 
            710 : 'circ', 
            732 : 'tilde', 
            8194 : 'ensp', 
            8195 : 'emsp', 
            8201 : 'thinsp', 
            8204 : 'zwnj', 
            8205 : 'zwj', 
            8206 : 'lrm', 
            8207 : 'rlm', 
            8211 : 'ndash', 
            8212 : 'mdash', 
            8216 : 'lsquo', 
            8217 : 'rsquo', 
            8218 : 'sbquo', 
            8220 : 'ldquo', 
            8221 : 'rdquo', 
            8222 : 'bdquo', 
            8224 : 'dagger', 
            8225 : 'Dagger', 
            8240 : 'permil', 
            8249 : 'lsaquo', 
            8250 : 'rsaquo', 
            8364 : 'euro'
        ;
    

ejemplo de uso:

var text = "Übergroße Äpfel mit Würmern";
alert(escapeHtmlEntities (text));

resultado:

Übergroße Äpfel mit Würmern
  • Actualización 1: Gracias bucabay de nuevo por el || – insinuación

  • Actualización2: Tabla de entidad actualizada con amp, lt, gt, apos, quot, gracias a richardtallent por la sugerencia

  • Update3 (en 2014): Mathias Bynens creó una biblioteca llamada ‘él’, tal vez satisfaga sus necesidades.

Todas las demás soluciones sugeridas aquí, así como la mayoría de las otras bibliotecas de JavaScript que codifican / decodifican entidades HTML, cometen varios errores:

  • No implementan la lista completa de referencias de caracteres con nombre que admiten los navegadores. Por ejemplo, htmlDecode('≼') debería volver '≼' (es decir 'u227C').
  • No admiten la codificación correcta de símbolos astrales. Por ejemplo, htmlEncode('') debería devolver algo como 𝌆 o 𝌆. Si una implementación devuelve dos entidades separadas en su lugar (p. Ej. �� o ��), está roto.
  • No admiten la decodificación correcta de símbolos astrales. htmlDecode('𝌆') debería volver '' y no '팆' (es decir 'uD306').
  • No implementan la tabla de anulaciones de referencias de caracteres que se enumeran en el estándar HTML. Por ejemplo, htmlDecode('€') debería volver '€' (es decir 'u20AC').
  • Deben realizar la decodificación en una sola pasada. Por ejemplo, htmlDecode('&amp;') debería volver '&', no &.

Para una solución robusta que evite todos estos problemas, use una biblioteca que escribí llamada él para esto. De su README:

él (para “entidades HTML”) es un codificador / decodificador de entidad HTML robusto escrito en JavaScript. Admite todas las referencias de caracteres con nombre estandarizadas según HTML, maneja símbolos de unión ambiguos y otros casos extremos como lo haría un navegador, tiene un conjunto de pruebas extenso y, al contrario de muchas otras soluciones de JavaScript, él maneja bien los símbolos Unicode astrales. Hay una demostración en línea disponible.

El uso de escape () debería funcionar con el rango de código de caracteres 0x00 a 0xFF (rango UTF-8).

Si va más allá de 0xFF (255), como 0x100 (256), escape () no funcionará:

escape("u0100"); // %u0100

y:

text = "u0100"; // Ā
html = escape(text).replace(/%(..)/g,"&#x$1;"); // &#xu0;100

Entonces, si desea cubrir todos los caracteres Unicode como se define en http://www.w3.org/TR/html4/sgml/entities.html, entonces podría usar algo como:

var html = text.replace(/[u00A0-u00FF]/g, function(c) 
   return '&#'+c.charCodeAt(0)+';';
);

Tenga en cuenta que aquí el rango está entre: u00A0- u00FF.

Ese es el primer rango de código de caracteres definido en http://www.w3.org/TR/html4/sgml/entities.html, que es el mismo que cubre escape ().

Deberá agregar los otros rangos que desea cubrir también, o todos ellos.

Ejemplo: Rango UTF-8 con puntuaciones generales ( u00A0- u00FF y u2022- u2135)

var html = text.replace(/[u00A0-u00FFu2022-u2135]/g, function(c) 
   return '&#'+c.charCodeAt(0)+';';
);

Editar:

Por cierto: u00A0- u2666 debería convertir todos los códigos de caracteres Unicode que no estén dentro del rango ASCII a entidades HTML a ciegas:

var html = text.replace(/[u00A0-u2666]/g, function(c) 
   return '&#'+c.charCodeAt(0)+';';
);

Aquí tienes las comentarios y valoraciones

Recuerda que puedes dar difusión a este enunciado si te fue útil.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *