In der Front-End-Entwicklung ist es häufig notwendig, den linken und rechten Winkelklammern von HTML in Entitätsformen zu entkommen. Wir können <,>, & usw. direkt auf der Webseite, die wir schließlich sehen, direkt anzeigen. Es muss entkommen werden, bevor es auf der Webseite angezeigt werden kann.
Escape -Sequenz wird auch als Zeicheneinheit bezeichnet. Der Hauptgrund für die Definition von entkommenen Saiten ist
Symbole wie "<" und ">" wurden verwendet, um das HTML -Tag darzustellen, sodass sie nicht direkt als Symbole im Text verwendet werden können. Aber manchmal ist es Bedarf, diese Symbole auf HTML -Seiten zu verwenden, sodass es ihre Escape -Zeichenfolge definieren muss.
Einige Zeichen sind im ASCII -Zeichensatz nicht definiert (z. B. das Copyright -Symbol "©"). Daher ist es notwendig, Fluchtzeichen (das Fluchtzeichen, das "©" entspricht, "©") verwendet, um sie darzustellen.
Hier sind zwei Funktionen entkommen und unausweichlich, die jeweils die Flucht von HTML als Entitäten und Drehungen implementieren.
Methode 1. Eine Zuordnungstabelle + regelmäßiger Austausch
Die Codekopie lautet wie folgt:
var keys = Object.Keys || Funktion (obj) {
obj = Objekt (obj)
var arr = []
für (var a in obj) arr.push (a)
return arr
}
var invert = function (obj) {
obj = Objekt (obj)
var result = {}
für (var a in obj) result [obj [a]] = a
Rückgabeergebnis
}
var entityMap = {
Flucht: {
'&': '&',,
'<': '<',
'>': '>',
'"': '"',
"'":' ''
}
}
EntityMap.unescape = Invert (entityMap.escape)
var entityreg = {
Escape: Regexp ('[' + Keys (EntityMap.escape) .Join ('') + ']', 'G'),
Unscape: regexp ('(' + keys (entityMap.unescape) .join ('|') + ')', 'G')
}
// HTML zu Entität entkommen
Funktion Escape (html) {
if (typeof html! == 'string') return '' ''
RETTURE HTML.REPLACE (Entityreg.escape, Funktion (Match) {
return entityMap.escape [Match]
})
}
// Wende die Entität wieder auf HTML
Funktion uneinflüssig (str) {
if (typeof str! == 'String') return '' ''
return str.replace (entityreg.unescape, function (match) {
return entityMap.unescape [Match]
})
}
Methode 2: Verwendung der Browser -DOM -API
Die Codekopie lautet wie folgt:
// HTML zu Entität entkommen
Funktion Escape (html) {
var elem = document.createelement ('div')
var txt = document.createTextNode (html)
Elem.Appendchild (TXT)
return Elem.innerhtml;
}
// Wende die Entität wieder auf HTML
Funktion uneinflüssig (str) {
var elem = document.createelement ('div')
elem.innerhtml = str
return Elem.InNerText || Elem.TextContent
}
Es gibt einen Fehler, dass nur "<> &" entkommen kann, und für einzelne Zitate werden doppelte Zitate nicht entkommen. Andere Nicht-ASCII können auch nicht entkommen werden. Achten Sie bei der Auswahl.
Vergleichen:
Methode 1 Das Codevolumen ist groß, aber die Flexibilität und Integrität sind besser als Methode 2. Die Entitätsmap -Abbildungstabelle kann entsprechend den Anforderungen hinzugefügt oder reduziert werden und in jeder JS -Umgebung ausgeführt werden.
Methode 2 ist eine Hack -Methode mit einer viel geringeren Menge an Code, und Sie können sie mit der internen API des Browsers entkommen und umleiten (beide Mainstream -Browser unterstützen sie). Es ist nicht vollständig und es ist offensichtlich, dass es nur in einer Browserumgebung verwendet werden kann (z. B. nicht in node.js).