Deux façons d'échapper aux crochets gauche et droit du HTML dans les compétences d'entité Forms_Javascript

Dans le travail de développement front-end, il est souvent nécessaire d'échapper aux crochets gauche et droit du HTML sous forme d'entité. Nous ne pouvons pas afficher <, >, &, etc. directement dans la page Web finale. Il doit être échappé avant de pouvoir être affiché sur la page Web.

La séquence d'évasion est également appelée entité de personnage. La principale raison de la définition de chaînes d'échappement est que des symboles tels que

, "<" et ">" ont été utilisés pour représenter les TAG HTML, ils ne peuvent donc pas être utilisés directement comme symboles dans le texte. Mais parfois, il est nécessaire d'utiliser ces symboles sur les pages HTML, sa chaîne d'échappement doit donc être définie.
Certains caractères ne sont pas définis dans le jeu de caractères ASCII (comme le symbole de copyright "©"). Il est donc nécessaire d'utiliser des caractères d'échappement (le caractère d'échappement correspondant à "©" est "©").

Deux fonctions escape et unscape sont fournies ici pour échapper et inverser le HTML en entités respectivement.

Méthode 1, remplacement régulier par une table de mappage

Copiez le code Le code est le suivant :

var clés = Objet.clés || function(obj) {
obj = Objet(obj)
var arr = []
pour (var a dans obj) arr.push (a)
return arr
}
var invert = function(obj) {
obj = Object(obj)
var result = {}
for (var a in obj) result[obj[a ]] = a
retour du résultat
}
varentityMap = {
escape : {
'&' : '&',
'<' : '<',
'>' : '>',
'"' : '"',
"'": '''
}
}
entityMap.unescape = invert (entityMap.escape)
varentityReg = {
escape: RegExp('['keys(entityMap.escape).join('') ']', 'g'),
unescape: RegExp( '(' keys(entityMap.unescape).join('|') ')', 'g')
}

// Échapper le HTML vers l'entité
fonction d'échappement (html) {
if (typeof html !== 'string') return ''
return html.replace(entityReg.escape, function(match) {
returnentityMap.escape[match]
})
}
// Reconvertir l'entité en HTML
function unescape(str) {
if (typeof str !== 'string') return ''
return str.replace (entityReg .unescape, function(match) {
returnentityMap.unescape[match]
})
}

Méthode 2. Utiliser l'API DOM du navigateur

Copier le code Le code est le suivant :

// Échapper le HTML vers les entités
fonction escape(html) {
var elem = document.createElement('div')
var txt = document.createTextNode(html)
elem.appendChild(txt)
return elem.innerHTML
}
/ / Reconvertir l'entité en HTML
function unescape(str) {
var elem = document.createElement('div')
elem.innerHTML = str
return elem.innerText elem || textContent
}

Un défaut est que seuls "< > &" peuvent être échappés. Les guillemets simples et les guillemets doubles ne sont pas échappés. De plus, certains caractères non-ASCII ne peuvent pas être échappés. Soyez prudent lors du choix.

Comparaison :

La méthode 1 a une plus grande quantité de code, mais sa flexibilité et son exhaustivité sont meilleures que la méthode 2. La table de mappage EntityMap peut être ajoutée ou réduite selon les besoins et peut s'exécuter dans n'importe quel environnement JS.

La méthode 2 est une méthode de piratage avec beaucoup moins de code. Vous pouvez utiliser l'API interne du navigateur pour échapper et inverser (prise en charge par tous les principaux navigateurs). Il n'est pas complet et ne peut évidemment être utilisé que dans un environnement de navigateur (par exemple, il ne peut pas s'exécuter dans Node.js).