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:[blockquote text=»n , salto de línea
‘ , para indicar comilla simple
« , para indicar comilla doble
, para escribir la contrabarra» show_quote_icon=»no» text_color=»#ffffff» background_color=»#045e67″ width=»80%»]
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.[button size=»medium» target=»_self» hover_type=»default» text=»Haz click para ver el ejemplo en acción» button_id=»ejemplo»][vc_raw_js]JTNDc2NyaXB0JTIwdHlwZSUzRCUyMnRleHQlMkZqYXZhc2NyaXB0JTIyJTNFJTIwJTBBJTBBd2luZG93Lm9ubG9hZCUyMCUzRCUyMGZ1bmN0aW9uJTI4JTI5JTdCZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQlMjglMjJlamVtcGxvJTIyJTI5Lm9uY2xpY2slMjAlM0QlMjBhY3R1YXIlM0IlN0QlM0IlMEElMEFmdW5jdGlvbiUyMGFjdHVhciUyOCUyOSU3QiUwQXZhciUyMHRleHRvJTIwJTNEJTIwJTIyJTNDc3Ryb25nJTNFTWVkaWFudGUlMjB1biUyMHdpbmRvdy5hbGVydCUyOCUyOSUzQyUyRnN0cm9uZyUzRSUyMGVzY3JpYmltb3MlMjB1biUyMHRleHRvJTIwJTVDbiUyMGVuJTIwdW5hJTIwdmVudGFuYSUyMGVtZXJnZW50ZSUyMHF1ZSUyMCU1Q24lMjBxdWUlMjBpbmNsdXllJTIwdmFyaW9zJTIwc2FsdG9zJTIwZGUlMjBsJUMzJUFEbmVhJTIweSUyMG90cm9zJTIwZWxlbWVudG9zJTIwJTVDbiUyMGNvbW8lMjAlNUMlMjJjb21pbGxhcyUyMGRvYmxlcyUyMCU1QyUyMi4lMjB5JTIwJTVDJTI3JTIwY29taWxsYXMlMjBzaW1wbGVzJTIwJTVDJTI3JTIwJTVDbiUyMFBvZCVDMyVBOWlzJTIwb2JzZXJ2YXIlMjBxdWUlMjBsYSUyMGV0aXF1ZXRhJTIwJTNDc3Ryb25nJTNFJTIwJTVDbiUyMCVDMiVBMW5vJTIwc2UlMjBoYSUyMGludGVycHJldGFkbyUyMSUyMC0lMjBGcmFuY2VzYyUyMFJpY2FydC4lMjIlM0IlMEF3aW5kb3cuYWxlcnQlMjh0ZXh0byUyOSUzQiUwQSU3RCUwQSUwQSUzQyUyRnNjcmlwdCUzRQ==[/vc_raw_js]
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!
Deja una respuesta