Zwei Möglichkeiten, die linken und rechten spitzen Klammern von HTML in Entitätsformen zu maskieren. Javascript-Kenntnisse

Bei Front-End-Entwicklungsarbeiten ist es häufig erforderlich, die linken und rechten spitzen Klammern von HTML in Entitätsform umzuwandeln. Wir können <, >, & usw. nicht direkt auf der endgültigen Webseite anzeigen. Es muss maskiert werden, bevor es auf der Webseite angezeigt werden kann.

Escape Sequence wird auch Character Entity genannt. Der Hauptgrund für die Definition von Escapezeichenfolgen besteht darin, dass Symbole wie

, „<“ und „>“ zur Darstellung von HTML-TAGs verwendet wurden und daher nicht direkt als Symbole im Text verwendet werden können. Manchmal besteht jedoch die Anforderung, diese Symbole auf HTML-Seiten zu verwenden, sodass die Escape-Zeichenfolge definiert werden muss.
Einige Zeichen sind nicht im ASCII-Zeichensatz definiert (z. B. das Copyright-Symbol „©“). Daher ist es notwendig, Escape-Zeichen zu verwenden (das entsprechende Escape-Zeichen für „©“ ist „©“).

Hier werden zwei Funktionen Escape und Unescape bereitgestellt, um HTML zu maskieren bzw. in Entitäten umzuwandeln.

Methode 1, regelmäßiges Ersetzen durch eine Zuordnungstabelle

Kopieren Sie den Code Der Code lautet wie folgt:

var keys = Object.keys ||. function(obj) {
obj = Object(obj)
var arr = []
for (var a in obj) arr.push (a)
return arr
}
var invert = function(obj) {
obj = Object(obj)
var result = {}
for (var a in obj) result[obj[a ]] = a
Rückgabeergebnis
}
var entityMap = {
escape: {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}
}
entityMap.unescape = invert (entityMap.escape)
var entityReg = {
escape: RegExp('[' keys(entityMap.escape).join('') ']', 'g'),
unescape: RegExp( '('keys(entityMap.unescape).join('|') ')', 'g')
}

// HTML zur Entität maskieren
Funktions-Escape (html) {
if (typeof html !== 'string') return ''
return html.replace(entityReg.escape, function(match) {
return entityMap.escape[match]
})
}
// Entität zurück in HTML konvertieren
function unescape(str) {
if (typeof str !== 'string') return ''
return str.replace (entityReg .unescape, function(match) {
return entityMap.unescape[match]
})
}

Methode 2. Verwenden Sie die Browser-DOM-API

Code kopieren Der Code lautet wie folgt:

// HTML in Entitäten maskieren
Funktion Escape(html) {
var elem = document.createElement('div')
var txt = document.createTextNode(html)
elem.appendChild(txt)
return elem.innerHTML;}
/ / Entität zurück in HTML konvertieren
function unescape(str) {
var elem = document.createElement('div')
elem.innerHTML = str
return elem.innerText ||. textContent
}

Ein Fehler besteht darin, dass nur „< > &“ maskiert werden kann und doppelte Anführungszeichen nicht maskiert werden. Darüber hinaus können einige Nicht-ASCII-Zeichen nicht maskiert werden. Seien Sie vorsichtig bei der Auswahl.

Vergleich:

Methode 1 hat eine größere Codemenge, aber ihre Flexibilität und Vollständigkeit sind besser als Methode 2. Die Zuordnungstabelle „entityMap“ kann je nach Bedarf hinzugefügt oder reduziert werden und kann in jeder JS-Umgebung ausgeführt werden.

Methode 2 ist eine Hack-Methode mit viel weniger Code. Sie können die interne API des Browsers zum Escapen und Umkehren verwenden (wird von allen gängigen Browsern unterstützt). Es ist nicht vollständig und kann offensichtlich nur in einer Browserumgebung verwendet werden (z. B. kann es nicht in Node.js ausgeführt werden).