Monday 8 June 2009

Comillas dobles y simples en HTML "input text"

Si eres desarrollador de aplicaciones web, sabrás ya que el tema de las comillas (simples y dobles) es siempre una fuente de problemas hasta que no descubres cómo lidiar con ellas. Voy a resumir ahora cuatro cosas que te van a funcionar siempre ;) si trabajas con PHP.

El problema principal es cuando queremos definir una cadena de texto que contenga unas comillas. Es un problema en sí mismo porque las cadenas de texto generalmente se delimitan usando comillas.

Uno pensaría que sería posible insertar comillas en una cadena de texto "escapando" esas comillas, es decir, usando un símbolo de "escape" (usualmente es la barra invertida \) delante de las comillas a escapar. Por ejemplo:

<input type='text' value='L\'Hospitalet' />

o bien:

<input type="text" value="un \"gran\" hombre" />

sin embargo, si haces la prueba, verás que ninguno de estos "escapes" funciona !!!!

Para incluir comillas dobles dentro de comillas dobles en HTML, tenemos que usar "carácteres especiales", así:

<input type="text" value="un &quot;gran&quot; hombre" />

La última cuestión es cómo hacer todo esto de manera fácil en PHP. Esto sería un ejemplo de cómo generar desde PHP el código HTML anterior suponiendo que la variable $value contenga una cadena con comillas dobles como un "gran" hombre:

<?php

echo "<input type=\"text\" value=\"".htmlspecialchars($value)."\" />";

?>

Como puedes suponer, la función htmlspecialchars transforma las comillas dobles (") en el código &quot;.

De hecho, htmlspecialchars transforma no solo las comillas dobles sino este pequeño grupo de carácteres:

  • [&] (ampersand) se transforma en [&amp;]

  • ["] (comillas dobles) se transforman en [&quot;] cuando no se usa ENT_NOQUOTES como segundo parámetro (opcional!).

  • ['] (comilla simple) se transforma en [&#039;] solamente cuando se usa ENT_QUOTES

  • [<] (menor que) se transforma en [&lt;]

  • [>] (mayor que) se transforma en [&gt;]



No olvides que de una forma u otra, cuando se envían por POST variables que contienen comillas (dobles o sencillas) estás llegan escapadas con una barra
diagonal delante [\] ("slash" en inglés) y que eliminamos con el PHP usando la función stripslashes() a cada variable $_POST() que pudiera contener comillas
de algún tipo!

En este enlace podéis ver un ejemplo de cómo usar htmlspecialchars() y lo explicado
en este artículo. Jugad con diferentes carácteres y mirad el código HTML de la página antes y después de enviar datos.

De todas formas:
  • posiblemente se me escapa algo, pues continuamente salen cosas nuevas o uno descubre nuevos "trucos"
  • existen artículos mucho más extendidos y con más ejemplos. Éste me gustó particularmente para gente que se incia en PHP, pues da un repaso más a fondo del uso de comillas en este lenguaje de programación: http://www.dxpro.es/index.php?topic=181.0
  • si detectas que he cometido algún error en mis ejemplos o en mi explicación, please, comenta aquí abajo y lo corregiré para ayuda de otros :)) Gracias!
Un saludo!
SERGI

16 comments:

  1. Gracias!! Me ayudo mucho... estaba buscando cómo hacer una función en Java y con la idea que diste me resultó... solo utilicé un cadena.replaceAll("\"", """)

    ReplyDelete
  2. (Ups!! no salió bien al publicar el comentario)
    Gracias!! Me ayudo mucho... estaba buscando cómo hacer una función en Java y con la idea que diste me resultó... la cuestión es reemplazar la comilla en java \" por una cadena que contenga su equivalente en html utilizando la función replaceAll. Gracias!!

    ReplyDelete
  3. Buenisimo man, me super sirvio
    mil gracias

    cheko

    ReplyDelete
  4. Si me sirvio muchas gracias ..... un visitante

    ReplyDelete
  5. Hola SERGI, esta puede ser otra opción que no tendra conflictos con la W3C y no tendra muchos simbolos de escape.

    ';

    ?>

    Saludos
    Craftyman

    ReplyDelete
  6. :p, bueno estpero que ahora salga el codigo

    echo '<input type="text" value="'.addslashes($value).'" />';



    Saludos
    Craftyman

    ReplyDelete
  7. ayuda alguien sabe como hacer comentarios en blog de blogger???

    ReplyDelete
  8. chebre tio te pasastes me ayudo bastante.
    gracias hermano

    ReplyDelete
  9. Craftyman, no, no sirve usar addslashes, te renderizará lo del segundo ejemplo que te dije!

    ReplyDelete
  10. Carftyman, el addslashes() sí funciona para cuando necesitas entrecomillar texto con comillas en JAVASCRIPT! Es decir, no sirve para el HTML pero sí para Javascript.

    De esta forma, y resumiendo, debemos usar esto para un value de un input en HTML:

    <?php

    echo "<input type=\"text\" value=\"".htmlspecialchars($value)."\" />";

    ?>

    y esto para una cadena entrecomillada en javascript:

    <?php

    echo '

    function js_mostrar_texto_con_comillas(){

    alert( " ' . addslashes($texto). ' " );

    }

    ';

    ?>

    ReplyDelete
  11. Excelente!! justo lo que estaba buscando y estaba por hacer un re-quilombo ...

    ReplyDelete