05 Mar 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 </.
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
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!
Roberto
Posted at 12:41h, 17 abrilLlevo 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
Posted at 22:41h, 30 octubreMe alegro muchísimo
Si tocaste C++ seguro que lo pillarás rápido
¡ánimo!