Ejemplos para escapar de caracteres HTML en JavaScript
- Ejemplo de método JavaScript Escape HTML Chars
- Forma alternativa de escapar de los caracteres HTML en JavaScript
No existe un método integrado para reemplazar los caracteres especiales de HTML con los caracteres obligatorios mediante JavaScript. Normalmente invocamos funciones personalizadas para lograr esa funcionalidad para escapar de los caracteres especiales reservados y predefinidos de HTML. En este artículo, discutiremos varios ejemplos para ignorar esos caracteres usando JavaScript mediante funciones declaradas personalizadas.
Ejemplo de método JavaScript Escape HTML Chars
A continuación, el código fuente HTML mostrará un tipo de texto de entrada From con marcador de posición para obtener cualquier valor de cadena del usuario en tiempo de ejecución. Llamaremos a una función declarada personalizada en el detector de eventos de entrada de formulario durante la inserción de valor. La función simplemente cambiará el carácter mencionado con otro carácter dado y finalmente devolverá el resultado.
Mostraremos el resultado de la cadena dada por el usuario convertida en la consola del navegador.
<!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>
En esta fuente de página HTML, hemos creado un tipo de texto de entrada de formulario para obtener un valor de cadena del usuario en el tiempo de ejecución de la página web.
Puede ver la función de tipo const escapeHtmlChars(string) para convertir la cadena proporcionada por el usuario escapando de los caracteres especiales de HTML.
En el cuerpo de ese método, hemos utilizado el método JavaScript replaceAll(value1,value2) para reemplazar el primer valor1 con el segundo valor2.
Como sabemos, buscábamos escapar de los caracteres especiales de HTML, simplemente pasamos cualquier carácter especial (que vamos a reemplazar) en el primer valor y una cadena vacía "" en el segundo valor.
Podemos usar el método replaceAll() varias veces en nuestra cadena como se muestra arriba, luego devolvemos esa cadena convertida también.
Hemos llamado a nuestra función escapeHtmlChars() en el oyente de document.querySelector('input').addEventListener(). Se activará automáticamente cuando el usuario ingrese O cambie el valor en el formulario de entrada.
Llamamos a la función en console.log() para mostrar el valor devuelto en la inspección del navegador.
Puede ver una entrada de formulario en la página web, simplemente inserte la cadena que contiene caracteres especiales HTML y vea la salida en la pestaña de la consola.
Forma alternativa de escapar de los caracteres HTML en JavaScript
También puede lograr la misma funcionalidad usando document.createTextNode(html). Crea un nuevo nodo Texto. Este método se puede usar para escapar de los caracteres HTML al pasar los caracteres que contienen la cadena a una función.
Luego agregaremos un texto convertido en una variable usando appendChild(text)
function escapeChars(html) {
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
}
Acabamos de usar otro método escapeChars(html) para convertir texto y devolver el resultado sin usar el método replace().