Décodage d'entité HTML
Comment encoder et décoder des entités HTML à l'aide de JavaScript ou de JQuery?
var varTitle = "Chris' corner";
Je veux que ce soit:
var varTitle = "Chris' corner";
Vous pouvez essayer quelque chose comme:
var Title = $('<textarea />').html("Chris' corner").text();
console.log(Title);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Une version plus interactive:
$('form').submit(function() {
var theString = $('#string').val();
var varTitle = $('<textarea />').html(theString).text();
$('#output').text(varTitle);
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<fieldset>
<label for="string">Enter a html-encoded string to decode</label>
<input type="text" name="string" id="string" />
</fieldset>
<fieldset>
<input type="submit" value="decode" />
</fieldset>
</form>
<div id="output"></div>Je déconseille d'utiliser le code jQuery qui a été accepté comme réponse. Bien qu'il n'insère pas la chaîne à décoder dans la page, il provoque la création d'éléments tels que des scripts et des éléments HTML. C'est beaucoup plus de code que nous avons besoin. Au lieu de cela, je suggère d'utiliser une fonction plus sûre et plus optimisée.
var decodeEntities = (function() {
// this prevents any overhead from creating the object each time
var element = document.createElement('div');
function decodeHTMLEntities (str) {
if(str && typeof str === 'string') {
// strip script/html tags
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
element.innerHTML = str;
str = element.textContent;
element.textContent = '';
}
return str;
}
return decodeHTMLEntities;
})();
Pour utiliser cette fonction, appelez simplement decodeEntities("&") et il utilisera les mêmes techniques sous-jacentes que la version jQuery, mais sans surcharge de jQuery et après avoir nettoyé les balises HTML de l'entrée. Voir commentaire de Mike Samuel sur la réponse acceptée pour savoir comment filtrer les balises HTML.
Cette fonction peut facilement être utilisée comme plugin jQuery en ajoutant la ligne suivante dans votre projet.
jQuery.decodeEntities = decodeEntities;
Comme Robert K l'a dit, n'utilisez pas jQuery.html (). Text () pour décoder les entités HTML car il est risqué, car les entrées utilisateur ne doivent jamais avoir accès au DOM. Lisez à propos de XSS pour savoir pourquoi ceci est dangereux.
Essayez plutôt les méthodes nderscore.js , qui incluent les méthodes escape et nescape :
Échappe une chaîne à insérer dans HTML en remplaçant les caractères &, <, >, ", ` et '.
_.escape('Curly, Larry & Moe');
=> "Curly, Larry & Moe"
Le contraire de escape remplace &, <, >, ", ` et ' par leurs équivalents non échappés.
_.unescape('Curly, Larry & Moe');
=> "Curly, Larry & Moe"
Pour prendre en charge le décodage de plus de caractères, copiez simplement la méthode Underscore nescape et ajoutez plus de caractères à la carte.
Voici une méthode rapide qui ne nécessite pas de créer un div et décode les caractères d'échappement HTML les plus courants:
function decodeHTMLEntities(text) {
var entities = [
['amp', '&'],
['apos', '\''],
['#x27', '\''],
['#x2F', '/'],
['#39', '\''],
['#47', '/'],
['lt', '<'],
['gt', '>'],
['nbsp', ' '],
['quot', '"']
];
for (var i = 0, max = entities.length; i < max; ++i)
text = text.replace(new RegExp('&'+entities[i][0]+';', 'g'), entities[i][1]);
return text;
}
Inspirée par la solution de Robert K, cette version ne supprime pas les balises HTML, elle est tout aussi sécurisée.
var decode_entities = (function() {
// Remove HTML Entities
var element = document.createElement('div');
function decode_HTML_entities (str) {
if(str && typeof str === 'string') {
// Escape HTML before decoding for HTML Entities
str = escape(str).replace(/%26/g,'&').replace(/%23/g,'#').replace(/%3B/g,';');
element.innerHTML = str;
if(element.innerText){
str = element.innerText;
element.innerText = '';
}else{
// Firefox support
str = element.textContent;
element.textContent = '';
}
}
return unescape(str);
}
return decode_HTML_entities;
})();
C'est ma manière préférée de décoder les caractères HTML. L'avantage d'utiliser ce code est que les balises sont également préservées.
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
Exemple: http://jsfiddle.net/k65s3/
Contribution:
Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>
Sortie:
Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>
jQuery fournit un moyen d'encoder et de décoder des entités HTML.
Si vous utilisez une balise "<div />", cela supprimera tout le code HTML.
function htmlDecode(value) {
return $("<div/>").html(value).text();
}
function htmlEncode(value) {
return $('<div/>').text(value).html();
}
Si vous utilisez une balise "<textarea />", les balises HTML seront conservées.
function htmlDecode(value) {
return $("<textarea/>").html(value).text();
}
function htmlEncode(value) {
return $('<textarea/>').text(value).html();
}
voici une autre version:
function convertHTMLEntity(text){
const span = document.createElement('span');
return text
.replace(/&[#A-Za-z0-9]+;/gi, (entity,position,text)=> {
span.innerHTML = entity;
return span.innerText;
});
}
console.log(convertHTMLEntity('Large < £ 500'));Pour ajouter encore un autre "inspiré par Robert K" à la liste, voici une autre version sûre qui ne supprime pas les balises HTML. Au lieu d'exécuter toute la chaîne via l'analyseur HTML, il extrait uniquement les entités et les convertit.
var decodeEntities = (function() {
// this prevents any overhead from creating the object each time
var element = document.createElement('div');
// regular expression matching HTML entities
var entity = /&(?:#x[a-f0-9]+|#[0-9]+|[a-z0-9]+);?/ig;
return function decodeHTMLEntities(str) {
// find and replace all the html entities
str = str.replace(entity, function(m) {
element.innerHTML = m;
return element.textContent;
});
// reset the value
element.textContent = '';
return str;
}
})();
Voici une version complète
function htmldecode(s){
window.HTML_ESC_MAP = {
"nbsp":" ","iexcl":"¡","cent":"¢","pound":"£","curren":"¤","yen":"¥","brvbar":"¦","sect":"§","uml":"¨","copy":"©","ordf":"ª","laquo":"«","not":"¬","reg":"®","macr":"¯","deg":"°","plusmn":"±","sup2":"²","sup3":"³","acute":"´","micro":"µ","para":"¶","middot":"·","cedil":"¸","sup1":"¹","ordm":"º","raquo":"»","frac14":"¼","frac12":"½","frac34":"¾","iquest":"¿","Agrave":"À","Aacute":"Á","Acirc":"Â","Atilde":"Ã","Auml":"Ä","Aring":"Å","AElig":"Æ","Ccedil":"Ç","Egrave":"È","Eacute":"É","Ecirc":"Ê","Euml":"Ë","Igrave":"Ì","Iacute":"Í","Icirc":"Î","Iuml":"Ï","ETH":"Ð","Ntilde":"Ñ","Ograve":"Ò","Oacute":"Ó","Ocirc":"Ô","Otilde":"Õ","Ouml":"Ö","times":"×","Oslash":"Ø","Ugrave":"Ù","Uacute":"Ú","Ucirc":"Û","Uuml":"Ü","Yacute":"Ý","THORN":"Þ","szlig":"ß","agrave":"à","aacute":"á","acirc":"â","atilde":"ã","auml":"ä","aring":"å","aelig":"æ","ccedil":"ç","egrave":"è","eacute":"é","ecirc":"ê","euml":"ë","igrave":"ì","iacute":"í","icirc":"î","iuml":"ï","eth":"ð","ntilde":"ñ","ograve":"ò","oacute":"ó","ocirc":"ô","otilde":"õ","ouml":"ö","divide":"÷","oslash":"ø","ugrave":"ù","uacute":"ú","ucirc":"û","uuml":"ü","yacute":"ý","thorn":"þ","yuml":"ÿ","fnof":"ƒ","Alpha":"Α","Beta":"Β","Gamma":"Γ","Delta":"Δ","Epsilon":"Ε","Zeta":"Ζ","Eta":"Η","Theta":"Θ","Iota":"Ι","Kappa":"Κ","Lambda":"Λ","Mu":"Μ","Nu":"Ν","Xi":"Ξ","Omicron":"Ο","Pi":"Π","Rho":"Ρ","Sigma":"Σ","Tau":"Τ","Upsilon":"Υ","Phi":"Φ","Chi":"Χ","Psi":"Ψ","Omega":"Ω","alpha":"α","beta":"β","gamma":"γ","delta":"δ","epsilon":"ε","zeta":"ζ","eta":"η","theta":"θ","iota":"ι","kappa":"κ","lambda":"λ","mu":"μ","nu":"ν","xi":"ξ","omicron":"ο","pi":"π","rho":"ρ","sigmaf":"ς","sigma":"σ","tau":"τ","upsilon":"υ","phi":"φ","chi":"χ","psi":"ψ","omega":"ω","thetasym":"ϑ","upsih":"ϒ","piv":"ϖ","bull":"•","hellip":"…","prime":"′","Prime":"″","oline":"‾","frasl":"⁄","weierp":"℘","image":"ℑ","real":"ℜ","trade":"™","alefsym":"ℵ","larr":"←","uarr":"↑","rarr":"→","darr":"↓","harr":"↔","crarr":"↵","lArr":"⇐","uArr":"⇑","rArr":"⇒","dArr":"⇓","hArr":"⇔","forall":"∀","part":"∂","exist":"∃","empty":"∅","nabla":"∇","isin":"∈","notin":"∉","ni":"∋","prod":"∏","sum":"∑","minus":"−","lowast":"∗","radic":"√","prop":"∝","infin":"∞","ang":"∠","and":"∧","or":"∨","cap":"∩","cup":"∪","int":"∫","there4":"∴","sim":"∼","cong":"≅","asymp":"≈","ne":"≠","equiv":"≡","le":"≤","ge":"≥","sub":"⊂","sup":"⊃","nsub":"⊄","sube":"⊆","supe":"⊇","oplus":"⊕","otimes":"⊗","perp":"⊥","sdot":"⋅","lceil":"⌈","rceil":"⌉","lfloor":"⌊","rfloor":"⌋","lang":"〈","rang":"〉","loz":"◊","spades":"♠","clubs":"♣","hearts":"♥","diams":"♦","\"":"quot","amp":"&","lt":"<","gt":">","OElig":"Œ","oelig":"œ","Scaron":"Š","scaron":"š","Yuml":"Ÿ","circ":"ˆ","tilde":"˜","ndash":"–","mdash":"—","lsquo":"‘","rsquo":"’","sbquo":"‚","ldquo":"“","rdquo":"”","bdquo":"„","dagger":"†","Dagger":"‡","permil":"‰","lsaquo":"‹","rsaquo":"›","euro":"€"};
if(!window.HTML_ESC_MAP_EXP)
window.HTML_ESC_MAP_EXP = new RegExp("&("+Object.keys(HTML_ESC_MAP).join("|")+");","g");
return s?s.replace(window.HTML_ESC_MAP_EXP,function(x){
return HTML_ESC_MAP[x.substring(1,x.length-1)]||x;
}):s;
}
Usage
htmldecode("∑ >€");
Inspiré par la solution de Robert K, supprime les balises html et empêche l'exécution de scripts et des gestionnaires d'événements tels que: <img src=fake onerror="Prompt(1)"> Testé sur les derniers Chrome, FF, IE (devrait fonctionner à partir d'IE9, mais n'ont pas testé).
var decodeEntities = (function () {
//create a new html document (doesn't execute script tags in child elements)
var doc = document.implementation.createHTMLDocument("");
var element = doc.createElement('div');
function getText(str) {
element.innerHTML = str;
str = element.textContent;
element.textContent = '';
return str;
}
function decodeHTMLEntities(str) {
if (str && typeof str === 'string') {
var x = getText(str);
while (str !== x) {
str = x;
x = getText(x);
}
return x;
}
}
return decodeHTMLEntities;
})();
Appelez simplement:
decodeEntities('<img src=fake onerror="Prompt(1)">');
decodeEntities("<script>alert('aaa!')</script>");
L'injection de code HTML non approuvé dans la page est dangereuse, comme expliqué dans la section Comment décoder des entités HTML à l'aide de jQuery? .
Une alternative consiste à utiliser une implémentation JavaScript uniquement du code html_entity_decode (à partir de http://phpjs.org/functions/html_entity_decode:424 ). L'exemple serait alors quelque chose comme:
var varTitle = html_entity_decode("Chris' corner");
Une approche plus fonctionnelle de la réponse de William Lahti:
var entities = {
'amp': '&',
'apos': '\'',
'#x27': '\'',
'#x2F': '/',
'#39': '\'',
'#47': '/',
'lt': '<',
'gt': '>',
'nbsp': ' ',
'quot': '"'
}
function decodeHTMLEntities (text) {
return text.replace(/&([^;]+);/gm, function (match, entity) {
return entities[entity] || match
})
}
Je sais que je suis un peu en retard pour le jeu, mais je pensais pouvoir fournir l'extrait de code suivant comme exemple de décodage d'entités HTML à l'aide de jQuery:
var varTitleE = "Chris' corner";
var varTitleD = $("<div/>").html(varTitleE).text();
console.log(varTitleE + " vs. " + varTitleD);
N'oubliez pas d'allumer votre inspecteur/firebug pour voir les résultats de la console - ou simplement de remplacer console.log (...) avec alerte (...)
Cela dit, voici ce que ma console via l'inspecteur Google Chrome a lu:
Chris' corner vs. Chris' corner
Parce que @Robert K et @mattcasey ont tous deux un bon code, je pensais que je contribuerais ici avec une version CoffeeScript, au cas où quelqu'un de l'avenir pourrait l'utiliser:
String::unescape = (strict = false) ->
###
# Take escaped text, and return the unescaped version
#
# @param string str | String to be used
# @param bool strict | Stict mode will remove all HTML
#
# Test it here:
# https://jsfiddle.net/tigerhawkvok/t9pn1dn5/
#
# Code: https://Gist.github.com/tigerhawkvok/285b8631ed6ebef4446d
###
# Create a dummy element
element = document.createElement("div")
decodeHTMLEntities = (str) ->
if str? and typeof str is "string"
unless strict is true
# escape HTML tags
str = escape(str).replace(/%26/g,'&').replace(/%23/g,'#').replace(/%3B/g,';')
else
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '')
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '')
element.innerHTML = str
if element.innerText
# Do we support innerText?
str = element.innerText
element.innerText = ""
else
# Firefox
str = element.textContent
element.textContent = ""
unescape(str)
# Remove encoded or double-encoded tags
fixHtmlEncodings = (string) ->
string = string.replace(/\&#/mg, '&#') # The rest, for double-encodings
string = string.replace(/\"/mg, '"')
string = string.replace(/\"e;/mg, '"')
string = string.replace(/\_/mg, '_')
string = string.replace(/\'/mg, "'")
string = string.replace(/\"/mg, '"')
string = string.replace(/\>/mg, '>')
string = string.replace(/\</mg, '<')
string
# Run it
tmp = fixHtmlEncodings(this)
decodeHTMLEntities(tmp)
Voir https://jsfiddle.net/tigerhawkvok/t9pn1dn5/7/ ou https://Gist.github.com/tigerhawkvok/285b8631ed6ebef4446d (inclut JS compilé, et est probablement mis à jour par rapport à cette réponse)
Pour le faire en javascript pur sans jQuery ou tout prédéfinir, vous pouvez faire défiler la chaîne html codée à travers les propriétés elements innerHTML et innerText (/ textContent) pour chaque étape de décodage requise:
<html>
<head>
<title>For every decode step, cycle through innerHTML and innerText </title>
<script>
function decode(str) {
var d = document.createElement("div");
d.innerHTML = str;
return typeof d.innerText !== 'undefined' ? d.innerText : d.textContent;
}
</script>
</head>
<body>
<script>
var encodedString = "<p>name</p><p><span style=\"font-size:xx-small;\">ajde</span></p><p><em>da</em></p>";
</script>
<input type=button onclick="document.body.innerHTML=decode(encodedString)"/>
</body>
</html>