Html_entities_decode

Soyez le premier à donner votre avis sur cette source.

Snippet vu 6 634 fois - Téléchargée 16 fois

Contenu du snippet

J'avais un problème avec les entités HTML lorsque je les envoyais dans un alert() ou dans un confirm().

Je me suis donc fait une petite fonction qui transforme les entités en Hexadécimal, puis je fais un unescape() dessus.

Je l'ai fais dans Excel, je n'ai eu aucun bogue à date mais puisque je l'ai fais dans Excel vite fait je ne garantis pas son intégrité.

Source / Exemple :


function html_entity_decode(str) {
	// Convertis les entitees HTML en Hexadecimal
	// Merci a Arto_8000 de www.javascriptfr.com
	var matches = str.match(/&(#[0-9]{1,3}|[a-z]{2,6});/g);
	var entities = {
		32 : "%20", 33 : "%21", quot : "%22", 34 : "%22", 35 : "%23", 36 : "%24", 37 : "%25", amp : "%26", 38 : "%26", 39 : "%27", 40 : "%28", 41 : "%29", 42 : "%2A", 43 : "%2B", 44 : "%2C", 45 : "%2D", 46 : "%2E", 47 : "%2F", 48 : "%30", 49 : "%31", 50 : "%32", 51 : "%33", 52 : "%34", 53 : "%35", 54 : "%36", 55 : "%37", 56 : "%38", 57 : "%39", 58 : "%3A", 59 : "%3B", lt : "%3C", 60 : "%3C", 61 : "%3D", gt : "%3E", 62 : "%3E", 63 : "%3F", 64 : "%40", 65 : "%41", 66 : "%42", 67 : "%43", 68 : "%44", 69 : "%45", 70 : "%46", 71 : "%47", 72 : "%48", 73 : "%49", 74 : "%4A", 75 : "%4B", 76 : "%4C", 77 : "%4D", 78 : "%4E", 79 : "%4F", 80 : "%50", 81 : "%51", 82 : "%52", 83 : "%53", 84 : "%54", 85 : "%55", 86 : "%56", 87 : "%57", 88 : "%58", 89 : "%59", 90 : "%5A", 91 : "%5B", 92 : "%5C", 93 : "%5D", circ : "%5E", 94 : "%5E", 95 : "%5F", 96 : "%60", 97 : "%61", 98 : "%62", 99 : "%63", 100 : "%64", 101 : "%65", 102 : "%66", 103 : "%67", 104 : "%68", 105 : "%69", 106 : "%6A", 107 : "%6B", 108 : "%6C", 109 : "%6D", 110 : "%6E", 111 : "%6F", 112 : "%70", 113 : "%71", 114 : "%72", 115 : "%73", 116 : "%74", 117 : "%75", 118 : "%76", 119 : "%77", 120 : "%78",
		121 : "%79", 122 : "%7A", 123 : "%7B", 124 : "%7C", 125 : "%7D", 126 : "%7E", 127 : "%7F", 128 : "%80", 129 : "%81", 130 : "%82", 131 : "%83", 132 : "%84", 133 : "%85", 134 : "%86", 135 : "%87", 136 : "%88", 137 : "%89", 138 : "%8A", 139 : "%8B", 140 : "%8C", 141 : "%8D", 142 : "%8E", 143 : "%8F", 144 : "%90", lsquo : "%91", 145 : "%91", rsquo : "%92", 146 : "%92", ldquo : "%93", 147 : "%93", rdquo : "%94", 148 : "%94", bull : "%95", 149 : "%95", ndash : "%96", 150 : "%96", mdash : "%97", 151 : "%97", tilde : "%98", 152 : "%98", trade : "%99", 153 : "%99", scaron : "%9A", 154 : "%9A", rsaquo : "%9B", 155 : "%9B", oelig : "%9C", 156 : "%9C", 357 : "%9D", 157 : "%9D", 382 : "%9E", 158 : "%9E", Yuml : "%9F", 159 : "%9F", nbsp : "%A0", 160 : "%A0", iexcl : "%A1", 161 : "%A1", cent : "%A2", 162 : "%A2", pound : "%A3", 163 : "%A3", curren : "%A4", 164 : "%A4", yen : "%A5", 165 : "%A5", brvbar : "%A6", 166 : "%A6", sect : "%A7", 167 : "%A7", uml : "%A8", 168 : "%A8", copy : "%A9", 169 : "%A9", ordf : "%AA", 170 : "%AA", laquo : "%AB", 171 : "%AB", not : "%AC", 172 : "%AC", shy : "%AD", 173 : "%AD", reg : "%AE", 174 : "%AE", macr : "%AF", 175 : "%AF", deg : "%B0",
		176 : "%B0", plusmn : "%B1", 177 : "%B1", sup2 : "%B2", 178 : "%B2", sup3 : "%B3", 179 : "%B3", acute : "%B4", 180 : "%B4", micro : "%B5", 181 : "%B5", para : "%B6", 182 : "%B6", middot : "%B7", 183 : "%B7", cedil : "%B8", 184 : "%B8", sup1 : "%B9", 185 : "%B9", ordm : "%BA", 186 : "%BA", raquo : "%BB", 187 : "%BB", frac14 : "%BC", 188 : "%BC", frac12 : "%BD", 189 : "%BD", frac34 : "%BE", 190 : "%BE", iquest : "%BF", 191 : "%BF", Agrave : "%C0", 192 : "%C0", Aacute : "%C1", 193 : "%C1", Acirc : "%C2", 194 : "%C2", Atilde : "%C3", 195 : "%C3", Auml : "%C4", 196 : "%C4", Aring : "%C5", 197 : "%C5", AElig : "%C6", 198 : "%C6", Ccedil : "%C7", 199 : "%C7", Egrave : "%C8", 200 : "%C8", Eacute : "%C9", 201 : "%C9", Ecirc : "%CA", 202 : "%CA", Euml : "%CB", 203 : "%CB", Igrave : "%CC", 204 : "%CC", Iacute : "%CD", 205 : "%CD", Icirc : "%CE", 206 : "%CE", Iuml : "%CF", 207 : "%CF", ETH : "%D0", 208 : "%D0", Ntilde : "%D1", 209 : "%D1", Ograve : "%D2", 210 : "%D2", Oacute : "%D3", 211 : "%D3", Ocirc : "%D4", 212 : "%D4", Otilde : "%D5", 213 : "%D5", Ouml : "%D6", 214 : "%D6", times : "%D7", 215 : "%D7", Oslash : "%D8", 216 : "%D8", Ugrave : "%D9", 217 : "%D9", Uacute : "%DA", 218 : "%DA",
		Ucirc : "%DB", 219 : "%DB", Uuml : "%DC", 220 : "%DC", Yacute : "%DD", 221 : "%DD", THORN : "%DE", 222 : "%DE", szlig : "%DF", 223 : "%DF", agrave : "%E0", 224 : "%E0", aacute : "%E1", 225 : "%E1", acirc : "%E2", 226 : "%E2", atilde : "%E3", 227 : "%E3", auml : "%E4", 228 : "%E4", aring : "%E5", 229 : "%E5", aelig : "%E6", 230 : "%E6", ccedil : "%E7", 231 : "%E7", egrave : "%E8", 232 : "%E8", eacute : "%E9", 233 : "%E9", ecirc : "%EA", 234 : "%EA", euml : "%EB", 235 : "%EB", igrave : "%EC", 236 : "%EC", iacute : "%ED", 237 : "%ED", icirc : "%EE", 238 : "%EE", iuml : "%EF", 239 : "%EF", eth : "%F0", 240 : "%F0", ntilde : "%F1", 241 : "%F1", ograve : "%F2", 242 : "%F2", oacute : "%F3", 243 : "%F3", ocirc : "%F4", 244 : "%F4", otilde : "%F5", 245 : "%F5", ouml : "%F6", 246 : "%F6", divide : "%F7", 247 : "%F7", oslash : "%F8", 248 : "%F8", ugrave : "%F9", 249 : "%F9", uacute : "%FA", 250 : "%FA", ucirc : "%FB", 251 : "%FB", uuml : "%FC", 252 : "%FC", yacute : "%FD", 253 : "%FD", thorn : "%FE", 254 : "%FE", yuml : "%FF", 255 : "%FF"
	}
	if (matches != null) {
		for (i=0; i<matches.length; i++) {
			var code = matches[i].substring(1,matches[i].length-1);
			if (code.charAt(0) == "#" && typeof entities[code.substr(1)] != "undefined") {
				str = str.replace(matches[i], entities[code.substr(1)]);
			} else {
				if (typeof entities[code] != "undefined") {
					str = str.replace(matches[i], entities[code]);
				}
			}
		}
	}
	return str;
}

// Utilisation
alert(unescape(html_entities_decode('&#80;&#97;&#115;&nbsp;&#109;&#97;&#108;&#33;&#63;')));

Conclusion :


J'espère que ce petit code peut vous être utile!
Ajouter un commentaire

Commentaires

jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4 -
-_-

Une petite question, pourquoi n'utilise dont pas ma solution. Elle est encore plus optimisé et prend moins de place

---> 163 caractères pour moi et + de 5000 pour toi O_O

5000 caractères !!!! C'est 5, 218 KO !!!! C'est le cinquième de la taille de JQuery, qui fait des centaines de fonctionnalité de plus !!!

Désolé, mais je ne comprends pourquoi tu ne regardes pas ma solution, elle est cross-browser : testé avec Safari, IE, Firefox, Opéra et Chrome et surtout, mais SURTOUT, elle prend 33 fois moins d'espace !!! Désolé mon emportement, mais ça dépasse ma logique ^^ Quelqu'un pour me dire ce qui cloche dans la fonction ? Y a-t-il un bug (je peux essayer de régler) ? Ou alors la fonction est-elle trop simple ?

Je reposte :

-----------
function convertToHex(ty){

tn=document.createElement("div");
tn.innerHTML=ty;
yn= tn.innerText || tn.textContent || tn.style.content;
return escape(yn);

}
/*Utilisation*/
alert(unescape(convertToHex("" + é")));
zen69
Messages postés
584
Date d'inscription
jeudi 28 décembre 2006
Statut
Membre
Dernière intervention
29 avril 2010
1 -
Bon finalement voici la fonction complète et révisé.

Quelques modifications depuis mon dernier commentaire....

J'ai enlever la clause insensitive de l'exp reg afin de ne pas mélanger par example É et é
J'ai complèté la liste des caractères.
J'ai ajouté un condition undefined aux entités qui commence avec un # puisqu'elles sont extraites de la variable entities.
J'ai aussi modifié la longueur des entitiés nommées comme À pour prendre l'entitée complète 4 étant trop court.

Encore une fois merci à Arto_8000 pour sa grande aide!!
zen69
Messages postés
584
Date d'inscription
jeudi 28 décembre 2006
Statut
Membre
Dernière intervention
29 avril 2010
1 -
Correction voici la fonction que j'utilise maintenant,

function html_decode(html) {
var matches = html.match(/&(#[0-9]{1,3}|[a-z]{2,6});/gi);
var nameEntities = {
quot : "%22",
apos : "%27",
amp : "%26",
lt : "%3C",
gt : "%3E",
nbsp : "%A0",
agrave : "%E0",
224 : "%E0",
32 : "%A0"
}

if (matches != null) {
for (i=0; i<matches.length; i++) {
var code = matches[i].substring(1,matches[i].length-1);
if (code.charAt(0) == "#") {
html = html.replace(matches[i], nameEntities[code.substr(1)]);
} else {
if (typeof nameEntities[code] != "undefined") {
html = html.replace(matches[i], nameEntities[code]);
}
}
}
}

return html;
}

je n'ai pas mis toutes les entités pour faire plus court...

Merci bcp Arto_8000
zen69
Messages postés
584
Date d'inscription
jeudi 28 décembre 2006
Statut
Membre
Dernière intervention
29 avril 2010
1 -
Arto_8000: Merci beaucoup pour ces précision sur le replace avec et sans regexp, je n'étais pas au fait du fonctionnement et des différences entre les deux, mis-à-part du fait qu'un s'applique sur une exp reg et l'autre sur un string...

Ouin escape je connais mais finalement je dois le combiné avec fromCharCode...

Voici donc ce que j'utilise maintenant

function html_decode(html) {
var matches = html.match(/&(#[0-9]{1,3}|[a-z]{2,6});/gi);
var nameEntities = {
quot : "%22",
apos : "%27",
amp : "%26",
lt : "%3C",
gt : "%3E",
nbsp : "%A0",
agrave : "%E0",
224 : "%E0",
}

if (matches != null) {
for (i=0; i<matches.length; i++) {
var code = matches[i].substring(1,matches[i].length-1);
if (code.charAt(0) == "#") {
html = html.replace(matches[i], escape(String.fromCharCode(code.substr(1))));
} else {
if (typeof nameEntities[code] != "undefined") {
html = html.replace(matches[i], nameEntities[code]);
}
}
}
}

return html;
}
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4 -
Ben voyons... Ceci devrait fonctionner

<script type="text/javascript">
function convertToHex(ty){

tn=document.createElement("div");
tn.innerHTML=ty;
yn= tn.innerText || tn.textContent || tn.style.content;
return escape(yn);

}
alert(unescape(convertToHex("" + é")));
</script>

Petite précision : on devrait plutôt indiquer <script type="application/javascript"> selon les dernières nouvelles mais je n'ai pas encore eu la confirmation que tous les navigateurs le comprendront

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.