Carácteres escapados en Javascript

Carácteres escapados en Javascript

Print Friendly, PDF & Email
Carácteres escapados en Javascript
Valora esta entrada
El término escapar un carácter en Javascript sin duda da un poquito de yuyu. En realidad una palabra poco atractiva para algo muy práctico.

El concepto es muy similar al de escapar un carácter en HTML. Esto es escribir un string mediante números, letras y símbolos que el navegador pueda entender siempre. Por ejemplo los famosos códigos ASCII.

Un ejemplo de su utilidad es cuando en lenguaje de marcado vamos a escribir el texto  </ y no queremos que el navegador lo interprete como un error de sintaxis del código. En su lugar escribimos &lt;/.

Pues bien, en javascript sucede algo parecido.

Cuando ejecutamos window.alert() tenemos que pensar que lo que le estamos pidiendo al navegador es que cree una ventana emergente.

Esta ventana emergente es una ventana y no un documento html. Carece de las etiquetas <html> y </html> y del <DOCTYPE! html>. Por lo tanto el contenido que pongamos en html obviamente no lo va a interpretar.

Esto implica que determinadas instrucciones se deberán escribir “escapadas”. Un ejemplo clásico es el de salto de línea. Deberemos buscar formas alternativas de dar la instrucción al navegador.

El símbolo mágico es la contra barra \.

Las instrucciones mínimas a recordar son:

\n , salto de línea

\' , para indicar comilla simple

\`` , para indicar comilla doble

\\ , para escribir la contrabarra

Ejemplo práctico

escapar instrucciones en javascript
Ejemplo de como escapar instrucciones en Javascript

La ventana creada por window.alert() no es un documento web y por tanto no interpreta el html.

Fijaros en la etiqueta <strong>. El texto no se ve en negrita y la etiqueta se ha escrito literalmente.

Sin embargo los caracteres precedidos de contrabarra \ si son entendidos.

Para profundizar: ¿como he creado en wordpress el botón del ejemplo anterior?

El botón que has visto tiene un identificador id de nombre “ejemplo”.

Mediante la etiqueta <script> he creado un pequeño código que llama a window.onload() para que cuando se cargue el documento asigne al botón un evento onclick. El identificador id me ayuda a llamar el botón mediante getElementById().

El evento onclick ejecuta la función “ejecutar”, que no es más que un window.alert() con el texto escapado convenientemente.

Si tienes interés puedes trastear el código mediante las herramientas para desarrolladores web y/o preguntarme en los comentarios.

¡Fíjate que ni siquiera estoy usando jquery!

Entradas relacionadas:

Ejercicio – El pokemon corredor
- 141
Ejercicio con solución dónde se usa setInterval y el posicionamiento relativo y absoluto de una caja html. Serie de ejercicios javascript.
Ejercicio JS – Como cargar una imagen aleatoria al clicar un botón
- 170
Ejercicio javascript resuelto en el que see plantea un script para cargar una imagen aleatoria cada vez que se clica un botón.
Acceder y modificar una web con javascript
- 586
Vamos a ver como mediante Javascript podemos interactuar con las etiquetas html que constituyen un documento web. Podemos acceder a una etiqueta, un párrafo, un enlace, una imagen, o incluso a los met...
Eliminar eventos Javascript .removeEventListener()
- 1171
Ejemplos prácticos de como usar addEventListener() y removeEventListener() del tutorial gratuito de Javascript (y apuntes para mis alumnos)
Ejercicio JS – Menú vertical desplegable con javascript (sin jquery)
- 284
Ejercicio práctico con solución sobre como crear un menú vertical con submenú vertical desplegable en javascript sin jquery. Incluye solución.
Ejercicio – Diferencia entre ++x y x++ en Javascript
- 136
En esta publicación se repasa mediante ejercicios la diferencia entre escribir ++x y x++ o --x y x--. Es cuestión de pillarle el tranquillo.
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 363
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
La apasionante historia del Javascript (resumida)
- 595
Javascript es un lenguaje de programación de lado cliente que ha cambiado Internet tal y como lo conocemos a día de hoy. Junto con el html y el css es uno de los 3 pilares del diseño web. Es un requer...
Ejercicio – Generación de una fecha personalizada mediante javascript
- 137
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Ejercicio JS – Crear un cronómetro con javascript
- 330
Completo cronómetro JS dónde se usa setInterval, addEventListener, removeEventListener y se repasan conceptos de CSS. Incluye solución.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.