website stats » 2007 » December | Solo Código |

Eliminar etiquetas HTML con Javascript

Escrito por J.F. el Friday, 7 de December del 2007 a las 13:47

Vamos a ver como podemos eliminar todas las etiquetas HTML de un texto mediante el uso de Javascript y una expresión regular. Eliminar las etiquetas HTML de un texto es necesario multitud de veces, para evitar que un usuario malintencionado haga mal uso de la permisividad del uso de dichas etiquetas.

Seguro que en alguna ocasión has observado que en foros, en vez de permitir utilizar etiquetas HTML para dar formato a los mensajes, utilizan otro tipo de etiquetas denominadas BBCode. Sin duda la principal razón de evitar la inserción de código HTML es frenar los ataques XSS como ya hemos comprobado en anteriores ocasiones. La función en cuestión para quitar de una cadena todo resto de HTML, es la siguiente:

TEXTO PLANO
JavaScript:
  1. function stripHTML(cadena)
  2. {
  3.     return cadena.replace(/<[^>]+>/g,'');
  4. }

Con el empleo de esa expresión regular, eliminamos cualquier cosa que se encuentre delimitada con los caracteres < >. Simplemente hemos de pasarle como parámetro, la variable en la que almacenemos el texto del cual queremos eliminar cualquier signo de HTML. A continuación un pequeño ejemplo, en el cual podrás escribir en un textarea todo el código que quieras, y al hacer click en un botón en el de al lado aparecerá el resultado sin las etiquetas HTML:

TEXTO PLANO
HTML:
  4. function stripHTML(cadena)
  5. {
  6.     document.all.sinHTML.value = cadena.replace(/<[^>]+>/g,'');
  7. }
  8. </script>
  9. </head>
  11. <h2>Introduce texto con HTML</h2>
  12.  
  13. <p><textarea cols="40" rows="10" name="texto" onBlur="stripHTML(this.value);">
  14. &lt;p align="center"&gt;El texto no contendra el formato HTMl, porque &lt;b&gt;va a ser eliminado.&lt;/b&gt;&lt;hr/&gt;&lt;/p&gt;
  15. </textarea></p>
  16.  
  17. <p><input type="button" value="Eliminar HTML" onClick="stripHTML(document.all.texto.value);"/></p>
  18.  
  19. <h2>Texto sin HTML</h2>
  20.  
  21. <p><textarea cols="40" rows="10" name="sinHTML" readOnly="true">
  22. </textarea></p>
  23.  
  24. </body>
  25. </html>

Comentarios (2)

Categoria: Javascript

Validador XHTML-CSS

Escrito por J.F. el Thursday, 6 de December del 2007 a las 12:55

XHTML-CSS es un validador muy útil que nos permitirá al mismo tiempo conocer si una página es válida tanto en XHTML como en CSS, al mismo tiempo. Simplemente introducimos la url, y nos saldrán ambos informes, detallándonos los fallos y warnings. Sin duda muy útil para webmasters:

XHTML-CSS

Enlace: | XHTML-CSS

Escribir comentario

Categoria: CSS,General,HTML,Recursos

Elegante caja elaborada con CSS

Escrito por J.F. el Tuesday, 4 de December del 2007 a las 15:39

Navegando y curioseando pro la red como siempre, me he encontrado con ésta caja elaborada con CSS y la ayuda de una imagen que puede ser muy útil para la elaboración de menús de restaurante.

Caja CSS

Tan solo hace uso de una imagen, y puedes observar el elegante resultado con el siguiene ejemplo:

TEXTO PLANO
HTML:
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Dotted Leaders</title>
  5. <style type="text/css">
  6. * {margin:0;padding:0}
  7. h1,h2{padding:10px 20px 0}
  8. #wrap{
  9.     width:500px;
  10.     border:1px solid #eff2df;
  11.     margin:0 20px;
  12.     float:left;
  13.     background:#809900;
  14.     display:inline;/*Ie double margin fix*/
  15. }
  16. #wrap ul{
  17.     padding:20px 40px;
  18.     list-style:none;
  19.     float:left;
  20.     border:1px solid #4c7300;
  21.     position:relative;
  22.     left:-2px;
  23.     top:-2px;
  24.     background:#eff2df;
  25.     color:#4c7300;
  26. }
  27. #wrap li{
  28.     line-height:1.2;
  29.     margin:-.9em 0 0 0;
  30.     position:relative;
  31.     float:left;
  32.     width:100%;
  33.     text-align:left;
  34.     border-bottom:1px dotted #000;
  35.     clear:both;
  36. }
  37. * html #wrap li{
  38.     border:none;
  39.     background: url(dotted-leader.gif) repeat-x left bottom;
  40. }
  41. #wrap li span{
  42.     background:#eff2df;
  43.     padding:1px 0 1px 5px;
  44.     color:#000;
  45.     position:relative;
  46.     top:.4em;
  47.     left:1px;/* ie rounding error*/
  48.     float:right;
  49. }
  50. #wrap li em{
  51.     margin:0 ;
  52.     position:relative;
  53.     top:1.6em;
  54.     padding:0 5px 0 0;
  55.     background:#eff2df;
  56. }
  57. #wrap p{padding:0 5em 0 0}
  58.  
  59. </style>
  60. </head>
  62. <h1>Caja CSS</h1>
  63. <h2>Lore Ipsum</h2>
  64. <div id="wrap">
  65.     <ul>
  66.  
  67.         <li>
  68.             <p><em>Lorem ipsum dolor sit amet </em></p>
  69.             <span>£8.99</span></li>
  70.         <li>
  71.             <p><em>In porta nisl id nisl varius ullamcorper</em></p>
  72.             <span>£9.99</span></li>
  73.         <li>
  74.  
  75.             <p><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></p>
  76.             <span>£10.00</span></li>
  77.         <li>
  78.             <p><em>Suspendisse augue mauris, mattis ac, commodo quis, lobortis vel, mauris. Etiam dolor neque, iaculis sit amet, tincidunt nec, elementum ut, lorem.</em></p>
  79.             <span>£11.00</span></li>
  80.         <li>
  81.             <p><em>Donec sed felis sit amet risus</em></p>
  82.  
  83.             <span>£12.00</span></li>
  84.         <li>
  85.             <p><em>Maecenas ante. Suspendisse pharetra, metus in tempus egestas, purus ante pellentesque purus, at gravida metus elit nec nunc. Etiam ante ligula, porttitor et, euismod commodo, pulvinar id, pede. Curabitur et magna. Vestibulum leo nibh, viverra sed, imperdiet non,</em></p>
  86.             <span>£13.99</span></li>
  87.         <li>
  88.             <p><em>Etiam ante ligula,</em></p>
  89.             <span>£14.00</span></li>
  90.  
  91.         <li>
  92.             <p><em>Fusce condimentum</em></p>
  93.             <span>£15.00</span></li>
  94.         <li>
  95.             <p><em>Morbi nibh velit, sodales eu</em></p>
  96.             <span>£16.00</span></li>
  97.         <li>
  98.  
  99.             <p><em>Etiam ante ligula,</em></p>
  100.             <span>£14.00</span></li>
  101.         <li>
  102.             <p><em>Fusce condimentum</em></p>
  103.             <span>£15.00</span></li>
  104.         <li>
  105.             <p><em>Morbi nibh velit, sodales eu</em></p>
  106.  
  107.             <span>£16.00</span></li>
  108.     </ul>
  109. </div>
  110.  
  111.  
  112. </div>
  113. </body>
  114. </html>

No olvides guardarte la imagen necesaria.
Enlace: | Autor original y demo

Escribir comentario

Categoria: CSS,Recursos

Test de velocidad para Javascript

Escrito por J.F. el Monday, 3 de December del 2007 a las 10:48

Vía Anieto2k, un test realizado para saber que navegador es más rápido en ejecutar el código Javascript. Al parecer, la beta de Firefox 3 sale bastante mal colocada, por lo que deberá ser un aspecto que mejorar por los desarrolladores. el más rápido ha sido Opera 9.50a.

Test Javascript

Test Javascript

Comentarios (7)

Categoria: General,Javascript

Solo Código

Solo Código es una colección de códigos de todo tipo que pueden resultar útiles para el diseño de páginas web. Está enfocado tanto para aquellos que son expertos, como para aquellos principiantes que quieren encontrar recursos útiles, o no saben implementar determinadas funciones en sus webs. No olvides que Solo Código es un blog de Informática Práctica, donde tenemos otras secciones interesantes como:
| Tutoriales | Trucos | Software | Links | Buscar |