Foros del Web » Programando para Internet » PHP »

Rodear todas las ocurrencias de <img */> con <div></div>

Estas en el tema de Rodear todas las ocurrencias de <img */> con <div></div> en el foro de PHP en Foros del Web. Hola a todos: ¿Cómo puedo hacer que todas las imágenes de un texto en HTML se rodeen automáticamente por una etiqueta <div>? Es decir: partiendo ...
  #1 (permalink)  
Antiguo 02/10/2006, 13:49
Avatar de Escoffie  
Fecha de Ingreso: abril-2003
Ubicación: Mérida, Yucatán
Mensajes: 242
Antigüedad: 21 años, 7 meses
Puntos: 9
Rodear todas las ocurrencias de <img */> con <div></div>

Hola a todos:

¿Cómo puedo hacer que todas las imágenes de un texto en HTML se rodeen automáticamente por una etiqueta <div>?

Es decir: partiendo de un
Código HTML:
<h1>Un encabezado</h1>
<p>Cierto texto <br/>más texto con salto de línea</p>
<img src="file1.jpg" alt="algo1" height="300" width="200" />
<p>Otro párrafo</p>
<img src="file2.jpg" alt="algo2" height="300" width="200" />
<p>Otro párrafo más<br/>con un salto de línea</p> 
acabe con un
Código HTML:
<h1>Un encabezado</h1>
<p>Cierto texto <br/>más texto con salto de línea</p>
<div class="clase"><img src="file1.jpg" alt="algo1" height="300" width="200" /></div>
 <p>Otro párrafo</p>
<div class="clase"><img src="file2.jpg" alt="algo2" height="300" width="200" /></div>
 <p>Otro párrafo más<br/>con un salto de línea</p> 
Ojo: la diferencia en los ejemplos anteriores es que las imágenes ahora están rodeadas por divs

Supongo que con ereg_replace() se puede hacer, pero no sé mucho de expresiones regulares, ni del uso de esta función (aunque ya leí lo que hay en www.php.net/ereg_replace)
  #2 (permalink)  
Antiguo 02/10/2006, 13:54
Avatar de omegafunky  
Fecha de Ingreso: diciembre-2003
Ubicación: Tabasco, Mexico
Mensajes: 3.534
Antigüedad: 20 años, 10 meses
Puntos: 33
hola

x k no pruebas con una hoja de estilo y solo le pones img { lo k kieras;} y ya no te metes en tanto problema
  #3 (permalink)  
Antiguo 02/10/2006, 13:59
Avatar de Escoffie  
Fecha de Ingreso: abril-2003
Ubicación: Mérida, Yucatán
Mensajes: 242
Antigüedad: 21 años, 7 meses
Puntos: 9
Hola omegafunky.
Gracias por tu respuesta.
El problema es que justo por una cuestión muy específica con hojas de estilos necesito que tengan un DIV alrededor.
Lo que comentas ya lo intenté, pero por el diseño que necesito, las opciones no me son suficientes.
Si Explorer entendiera el :after y el :before no tendría problemas, pero ya sabes cómo es esto...

Saludos
  #4 (permalink)  
Antiguo 02/10/2006, 21:32
Avatar de seyacat  
Fecha de Ingreso: agosto-2006
Mensajes: 382
Antigüedad: 18 años, 3 meses
Puntos: 0
Si la verdad con expresiones regulares lo tendras, a veces on medio jodidas pero ya te acostumbraras

voy a intentar sin probar

preg_replace("@(<img[^>]*>[^<]*<\img>)@","<div>\1</div>");

Bueno algo asi, se que por ahi me faltan algunas cosas jeje
  #5 (permalink)  
Antiguo 03/10/2006, 14:58
Avatar de Escoffie  
Fecha de Ingreso: abril-2003
Ubicación: Mérida, Yucatán
Mensajes: 242
Antigüedad: 21 años, 7 meses
Puntos: 9
Hola seyacat, gracias por tu respuesta. Me temo que no funcionó, jejeje.

Por otro lado, leyendo tutoriales por ahí llegué a ésto:

Código PHP:
//Esta es la caden aen HTML que pretendo sea procesada
/*Obsérvese que procuré poner varios casos 
de la etiqueta <img/> ligeramente diferentes*/
$myhtml '<h1>Un encabezado</h1>
<p>Cierto texto <br/>
más texto con salto de línea</p>
<img src="img/galeria/2005fotos/2005galeria03.jpg" alt="Algo Íñigo 1" width="300" height="225" />
<p>Otro párrafo</p>
<img src="img/galeria/2005fotos/2005galeria03.jpg" width="300" height="225" />
<p>Otro párrafo</p>
<img src="img/galeria/2005fotos/2005galeria03.jpg" width="300"/>
<p>Otro párrafo</p>
<img src="img/galeria/2005fotos/2005galeria06.jpg" alt="algo2" width="300" height="225" />
<p>Otro párrafo más<br/>
con un salto de línea</p>'
;
//Aquí está la expresión regular que hace el trabajo
$myoutput ereg_replace("<img (src=\"([^\",\>,\<]+)\"){1}( )?(alt=\"([^\",\>,\<]+)\")?( )?(width=\"[0-9]+\")?( )?(height=\"[0-9]+\")?( )?\/>","<div style=\"margin: 10px 0px; padding:10px;background-color:red;\">\\0</div>"$myhtml);
//mostrar el resultado en pantalla
echo $myoutput
De hecho funciona bastante bien, pero me gustaría un poco más de ayuda para:
  1. Saber si es posible simplificarlo, porque creo que en mi ignorancia me compliqué la vida.
  2. Si es posible que cada coincidencia dentro del patrón aparezcan en orden diferente. Es decir, que coincida tanto si pongo <img src="algo.jpg" width="300" height="200" /> como si pongo <img src="algo.jpg" height="300" width="200" /> (la diferencia está en el orden de los atributos de tamaño)
Saludos y muchas gracias.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:16.