Carácteres escapados en Javascript

Carácteres escapados en Javascript

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!

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

2 Comentarios
  • Roberto
    Publicado a las 12:41h, 17 abril Responder

    Llevo años sin tocar temas de programación y con el contenido que Francesc pone aquí me despierta el interés nuevamente porque me hace recordarlo.Solo me ocupaba de aprobar los exámenes de C++ para aprobarlos.Espero aprender.

    • Francesc Ricart
      Publicado a las 22:41h, 30 octubre Responder

      Me alegro muchísimo
      Si tocaste C++ seguro que lo pillarás rápido
      ¡ánimo!

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.