Exemples d'échappement de caractères HTML en JavaScript
- Exemple de méthode JavaScript Escape HTML Chars
- Autre moyen d’échapper aux caractères HTML en JavaScript
Il n’y a pas de méthode intégrée pour remplacer les caractères spéciaux HTML par les caractères requis à l’aide de JavaScript. Nous invoquons normalement des fonctions personnalisées pour obtenir cette fonctionnalité afin d’échapper aux caractères spéciaux HTML prédéfinis et réservés. Dans cet article, nous discuterons de plusieurs exemples pour ignorer ces caractères utilisant JavaScript par des fonctions déclarées personnalisées.
Exemple de méthode JavaScript Escape HTML Chars
Le code source HTML ci-dessous affichera un type d’entrée de texte avec un espace réservé pour obtenir n’importe quelle valeur de chaîne de l’utilisateur au moment de l’exécution. Nous appellerons une fonction déclarée personnalisée sur l’écouteur d’événement de l’entrée du formulaire lors de l’insertion de la valeur. La fonction changera simplement le caractère mentionné par un autre caractère donné et renverra finalement le résultat.
Nous afficherons le résultat de la chaîne convertie donnée par l’utilisateur dans la console du navigateur.
<!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>
Dans cette source de page HTML, nous avons créé un type de saisie de formulaire de texte pour obtenir une valeur de chaîne de l’utilisateur lors de l’exécution de la page Web.
Vous pouvez voir la fonction de type const escapeHtmlChars(string) pour convertir la chaîne donnée par l’utilisateur en échappant aux caractères spéciaux HTML.
Dans le corps de cette méthode, nous avons utilisé la méthode JavaScript replaceAll(value1,value2) pour remplacer la première valeur1 par la seconde valeur2.
Comme nous le savons, nous cherchions à échapper les caractères spéciaux HTML, nous avons simplement passé n’importe quel caractère spécial (que nous allons remplacer) à la première valeur et une chaîne vide "" à la deuxième valeur.
Nous pouvons utiliser la méthode replaceAll() plusieurs fois sur notre chaîne comme indiqué ci-dessus, puis nous renvoyons également cette chaîne convertie.
Nous avons appelé notre fonction escapeHtmlChars() sur le listener de document.querySelector('input').addEventListener(). Il se déclenchera automatiquement chaque fois que l’utilisateur saisira OU modifiera la valeur dans le formulaire de saisie.
Nous avons appelé la fonction dans console.log() pour afficher la valeur renvoyée dans l’inspection du navigateur.
Vous pouvez voir une entrée de formulaire dans la page Web, insérez simplement la chaîne contenant des caractères spéciaux HTML et affichez la sortie dans l’onglet de la console.
Autre moyen d’échapper aux caractères HTML en JavaScript
Vous pouvez également obtenir la même fonctionnalité en utilisant document.createTextNode(html). il crée un nouveau nœud Texte. Cette méthode peut être utilisée pour échapper des caractères HTML en passant des caractères contenant la chaîne à une fonction.
Ensuite, nous ajouterons un texte converti dans une variable en utilisant appendChild(text).
function escapeChars(html) {
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
}
Nous venons d’utiliser une autre méthode escapeChars(html) pour convertir le texte et retourner le résultat sans utiliser la méthode replace().