Beispiele zum Escape von HTML-Zeichen in JavaScript
- Beispiel für eine JavaScript-Escape-HTML-Chars-Methode
- Alternative Möglichkeit, HTML-Zeichen in JavaScript zu maskieren
Es gibt keine integrierte Methode, um HTML-Sonderzeichen mithilfe von JavaScript durch erforderliche Zeichen zu ersetzen. Normalerweise rufen wir benutzerdefinierte Funktionen auf, um diese Funktionalität zu erreichen, um HTML-vordefinierte und reservierte Sonderzeichen zu maskieren. In diesem Artikel werden wir mehrere Beispiele besprechen, um diese Zeichen zu ignorieren, die JavaScript durch benutzerdefinierte deklarierte Funktionen verwenden.
Beispiel für eine JavaScript-Escape-HTML-Chars-Methode
Der folgende HTML-Quellcode zeigt einen Texttyp From mit Platzhalter, um zur Laufzeit einen beliebigen Zeichenkettenwert vom Benutzer zu erhalten. Wir werden eine benutzerdefinierte deklarierte Funktion im Ereignis-Listener der Formulareingabe während des Einfügens des Werts aufrufen. Die Funktion wird einfach das erwähnte Zeichen durch ein anderes gegebenes Zeichen ersetzen und schließlich das Ergebnis zurückgeben.
Wir zeigen das konvertierte, vom Benutzer angegebene String-Ergebnis in der Browserkonsole an.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | Escape HTML Special Chars
</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hi Users Check Escape of HTML Special Chars.</h2>
<Form>
<input style='width:90%; padding:6px;' placeholder='Enter Text With HTML Chars'>
</Form>
<script>
//function to ignore OR escape HTML chars
const escapeHtmlChars = (unsafe) => {
return unsafe.replaceAll('&', '').replaceAll('<', '').replaceAll('>', '').replaceAll('"', '').replaceAll("'", '');
}
// Escape while typing & print result in console
document.querySelector('input').addEventListener('input', e => {
console.clear();
console.log( escapeHtmlChars(e.target.value));
});
</script>
</body>
<html>
In dieser HTML-Seitenquelle haben wir einen Formulareingabetyp für Text erstellt, um zur Laufzeit der Webseite einen Zeichenkettenwert vom Benutzer zu erhalten.
Sie können die konstante Typfunktion escapeHtmlChars(string) sehen, um die vom Benutzer angegebene Zeichenfolge zu konvertieren, indem Sie die HTML-Sonderzeichen maskieren.
Im Hauptteil dieser Methode haben wir die JavaScript-Methode replaceAll(value1,value2) verwendet, um den ersten Wert1 durch den zweiten Wert2 zu ersetzen.
Wie wir wissen, haben wir versucht, die HTML-Sonderzeichen zu maskieren, wir haben einfach irgendein Sonderzeichen (das wir ersetzen werden) beim ersten Wert und eine leere Zeichenfolge "" beim zweiten Wert übergeben.
Wir können die Methode replaceAll() wie oben gezeigt mehrmals auf unseren String anwenden, dann geben wir auch diesen konvertierten String zurück.
Wir haben unsere Funktion escapeHtmlChars() auf dem Listener von document.querySelector('input').addEventListener() aufgerufen. Es wird automatisch ausgelöst, wenn der Benutzer einen Wert in das Eingabeformular eingibt oder ändert.
Wir haben die Funktion in console.log() aufgerufen, um den zurückgegebenen Wert in der Browserprüfung anzuzeigen.
Sie können eine Formulareingabe auf der Webseite sehen, fügen Sie einfach die Zeichenfolge mit HTML-Sonderzeichen ein und sehen Sie sich die Ausgabe auf der Konsolenregisterkarte an.
Alternative Möglichkeit, HTML-Zeichen in JavaScript zu maskieren
Dieselbe Funktionalität können Sie auch mit document.createTextNode(html) erreichen. es Erstellt einen neuen Text-Knoten. Diese Methode kann verwendet werden, um HTML-Zeichen zu maskieren, indem Zeichen, die die Zeichenfolge enthalten, an eine Funktion übergeben werden.
Dann werden wir einen konvertierten Text in einer Variablen mit appendChild(text) anhängen.
function escapeChars(html) {
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
}
Wir haben gerade eine andere Methode escapeChars(html) verwendet, um Text zu konvertieren und das Ergebnis zurückzugeben, ohne die Methode replace() zu verwenden.