Dans le développement frontal, il est souvent nécessaire d'échapper aux supports d'angle gauche et droite de HTML sous forme d'entité. Nous ne pouvons pas afficher <,>, & etc. directement sur la page Web que nous voyons enfin. Il doit être échappé avant de pouvoir s'afficher sur la page Web.
La séquence d'échappement est également appelée entité de caractère. La raison principale de la définition des cordes échappées est
Des symboles tels que "<" et ">" ont été utilisés pour représenter la balise HTML, ils ne peuvent donc pas être utilisés directement comme symboles dans le texte. Mais parfois, le besoin est d'utiliser ces symboles sur des pages HTML, il doit donc définir sa chaîne d'évasion.
Certains caractères ne sont pas définis dans le jeu de caractères ASCII (comme le symbole du droit d'auteur "©"). Par conséquent, il est nécessaire d'utiliser des caractères d'échappement (le caractère d'échappement correspondant à "©" est "©") pour les représenter.
Voici deux fonctions Escape et UNSCAPE, qui mettent respectivement la fuite de HTML en tant qu'entités et tournent.
Méthode 1. Une table de mappage + remplacement régulier
La copie de code est la suivante:
var keys = object.keys || fonction (obj) {
obj = objet (obj)
var arr = []
pour (var a in obj) arr.push (a)
retourr arr
}
var invert = fonction (obj) {
obj = objet (obj)
Var Result = {}
pour (var a dans obj) résultat [obj [a]] = a
Résultat de retour
}
var entityMap = {
s'échapper: {
'&': '&',
'<': '<',
'>': '>',
'' ':' '' ',
"'":' '
}
}
EntityMap.Unescape = Invert (EntityMap.Escape)
var entityReg = {
Escape: regexp ('[' + clés (entitymap.escape) .join ('') + ']', 'g'),
UNESCAPE: Regexp ('(' + Keys (EntityMap.Unescape) .join ('|') + ')', 'g')
}
// échappe à l'entité HTML
function Escape (html) {
if (typeof html! == 'string') return ''
return html.replace (entityreg.escape, fonction (match) {
retour entitymap.escape [match]
})
}
// retourne l'entité en html
fonction Unescape (str) {
if (typeof str! == 'string') return ''
return str.replace (entityreg.unescape, fonction (match) {
return entitymap.unescape [match]
})
}
Méthode 2: Utilisation de l'API DOM du navigateur
La copie de code est la suivante:
// échappe à l'entité HTML
function Escape (html) {
var elem = document.CreateElement ('div')
var txt = document.CreateTextNode (html)
elem.appendChild (txt)
retour elem.innerhtml;
}
// retourne l'entité en html
fonction Unescape (str) {
var elem = document.CreateElement ('div')
elem.innerhtml = str
return elem.innertext || elem.TextContent
}
Il y a un défaut qui seul "<> &" peut être échappé, et pour les citations simples, les citations doubles ne sont pas échappées. D'autres non-ASCII ne peuvent pas non plus être échappés. Faites attention lors du choix.
Comparer:
Méthode 1 Le volume de code est important, mais la flexibilité et l'intégrité sont meilleures que la méthode 2. La table de mappage entityMap peut être ajoutée ou réduite en fonction des exigences, et peut être exécutée dans n'importe quel environnement JS.
La méthode 2 est une méthode de piratage, avec une quantité beaucoup plus petite de code, et vous pouvez l'échapper et le rediriger en utilisant l'API interne du navigateur (les deux navigateurs grand public le prennent en charge). Il n'est pas complet et il est évident qu'il ne peut être utilisé que dans un environnement de navigateur (comme ne pas fonctionner dans Node.js).