0

Estoy intentando buscar en HTML todas las imágenes (<img>) que están contenidas por un enlace (<a>).

La expresión que he conseguido y funciona más o menos bien es:

'/<a.*?href=\"(.*?)\".*?>(<img.*?src=\"(.*?)\".*?>)<\/a>/'

El problema es que también obtiene coincidencias del tipo <a .. /> <a..><img ../></a>. Es decir que si hay enlaces por delante los incluye y lo que quiero exactamente buscar es un enlace con una imagen dentro.

Comento que estoy trabajando en PHP, estoy usando preg_match_all, y lo hago así porque no solo necesito buscarlo, sino también hacer unas modificaciones. Necesito obtener la URL del link y de la imagen para, en caso de coincidir, eliminar el link.

Edito otra vez a ver si esta vez lo dejo claro. El HTML está en una base de datos (WordPress) y no puedo usar un parseador porque no sigue siempre la estructura de un HTML válido. Por otro lado no es algo que quiera mantener, lo voy a usar para hacer unos cambios y no se volverá a usar.

4
  • 2
    y por qué no usas jquery con el metodo .find()?
    – lois6b
    Commented el 24 jul. 2017 a las 7:54
  • 1
    O más fácil: $("a > img"). O con javascript: document.querySelector("a > img")
    – user7176
    Commented el 24 jul. 2017 a las 8:07
  • 2
    No consideres a HTML como si fuera solamente un documento de texto. Este archivo puedes tratarlo como un objeto XML haciendo uso de un parser, con el cual podrás recorrerlo completamente de manera más sencilla. Algo que naturalmente hace css, js, ..., facilitando mucho tu problema (Como responde @lois6b por ej.). Además tendrás menos posibilidades de error, o fallas de seguridad. Ya que, si consideras a HTML sólo como un texto; un usuario o alguien podría agregar el mensaje <a..><img../></a> y el servidor (mas bien, PHP) podría llegar a confundirlo al usar una expresión regular.
    – Francute
    Commented el 24 jul. 2017 a las 8:54
  • 1
    ¿Podrías por favor agregar el ejemplo del texto que no podría ser parseado como un DOMDocument? De lo contrario, por más que pueda darte un regex que te sirva en un caso, jamás sería capaz de recomendártelo por los motivos expresados en muchas de las respuestas que recibiste. Sin eso, creo que la pregunta está incompleta.
    – Mariano
    Commented el 24 jul. 2017 a las 10:04

5 respuestas 5

2

No puedes parsear [X]HTML con expresiones regulares porque el HTML no se puede parsear con regex. Regex no es una herramienta que se pueda usar para parsear correctamente HTML. Como ya he contestado muchas preguntas de HTML y regex, el uso de regex no te permitirá procesar HTML. Las expresiones regulares son una herramienta que no es lo suficientemente sofisticada para entender las construcciones utilizadas por el HTML. HTML no es un lenguaje regular y, por tanto, no puede analizarse sintácticamente mediante expresiones regulares. Las expresiones regulares no están equipadas para diseccionar el HTML en sus partes representativas. Muchas veces pero no está funcionando. Incluso las expresiones regulares mejoradas irregularmente como las que usa Perl no consiguen ser capaces de procesar correctamente el HTML. No conseguirás hacerlo. HTML es un lenguaje de suficiente complejidad que no puede parsearse con expresiones regulares. Ni siquiera Julio Iglesias puede parsear expresiones regulares. Cada vez que intentas parsear un HTML con expresiones regulares, un hacker ruso te hackea la webapp y un niño impío llora por la sangre de las vírgenes. Parsear HTML con regex invoca almas sucias al reino de los vivos. HTML y regex van de la mano tanto como el amor, el matrimonio y el sacrificio de niños. El <center> no puede hacerse responsable, es demasiado tarde. La fuerza de regex y HTML juntos en el mismo espacio conceptual destruirá tu mente. Si parseas HTML con regex te estás entregando a Ellos y a sus formas blasfemas que nos condenan a todo trabajo inhumano para Aquel cuyo Nombre no puede ser expresado en el Plano Multilingüe Básico, él viene. HTML-y-regexp licuará los nervios de los que sienten mientras observas, tu psique se marchita en la embestida del horror. Los parsers de HTML basados en rege̿̔̉x- son el cáncer que está matando Stack Overflow es demasiado tarde es demasiado tarde no podemos salvarnos la transgresión de un hi͡jo asegura que el regex consumirá todo tejido vivo (excepto por el HTML que no puede consumirse, como se profetizó) querido señor, ayúdanos a sobrevivir este flagelo usar regex para parsear HTML ha condenado a la humanidad a una eternidad de torturas y agujeros de seguridad usar regex como herramienta de procesamiento de HTML crea una rotua entre este mundo y el reino temible de entidades c͒ͪo͛ͫrruptas (como entidades SGML, pero más corruptas) un simple vistazo al mundo de los parsers reg​ex para HTML transpotaría immediatamente a la conciencia de los programadores hacia un mundo de gritos sin pausa, aparece, la pestilente infección de regex dev​orará tu parser de HT​ML, tu aplicación y tu existencia para siempre como un mero Visual Basic o peor él viene no luches élviene v̡im̡ie̶ne, ̕h̵u radiaccio͞n destryendo҉ toda lumi̍̈́̂̈́nosidad, las etiquetas de HTML filtra͠ndo de ̡tu​͟s ojos̸ ̛como líqido doloroso, la canción de parsear expresiones re̸gulares va a extinguir las voces del hombre mor​tal de la esf/b>era puedo verlo puede ̲͚̖͔̙ver es hermoso el final extinguiendo las mentiras de los Hombres TODO EŚ͖̩͇̗̪̏̈́TÁ PERDIDO TODO ESTÁ PERDIDO el pon̷y él viene él viene él viene el ícor permea todo MI CARA MI CARA ᵒh dos no o NO NOO̼O​O NΘ para los án​*̶͑̾̾​̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆ul͖͉̗̩̳̟̍ͫͥͨos ͎ n​o son rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆es ZA̡͊͠͝LGΌ ESͮ̂҉̯͈͕̹̘̱ ALȳ̳ Ë͖́̉L ͠P̯͍̭O̚​N̐Y̡ Ȩ̬̩̾͛ͪ̈́̀́͘L ̶̧̨̱̹̭̯ͧ̾ͬViENȆ̴̟̟͙̞ͩ͌͝"


¿Has intentado usar un analizador sintáctico (parser) de XML?

8
  • Mi sentido homenaje a RegEx match open tags except XHTML self-contained tags
    – fedorqui
    Commented el 24 jul. 2017 a las 8:29
  • 1
    Sé que esto es un chiste que se hizo famoso. No obstante, "HTML no se puede parsear con regex" es falso. "no es lo suficientemente sofisticada" es falso. "no están equipadas para diseccionar el HTML" es falso. "no es un lenguaje regular y, por tanto, no puede analizarse sintácticamente mediante expresiones regulares" es rotundamente falso. Lo que es verdad es que te va a traer dolores de cabeza, porque no es una herramienta que se ajuste a ese trabajo... Odio esta publicación.
    – Mariano
    Commented el 24 jul. 2017 a las 8:43
  • @Mariano probablemente dé para una publicación: ¿en qué casos se puede usar RegEx para analizar sintácticamente un HTML? Y desmontar tópicos con ella.
    – fedorqui
    Commented el 24 jul. 2017 a las 9:06
  • Es un tema que da para libros enteros, pero tratando de resumir, un gran grupo de parsers utiliza expresiones regulares para procesar cada token (incluyendo algunas funciones de los navegadores más famosos). Por supuesto, va acompañado de código auxiliar, para simplificar una tarea que, de lo contrario, sería poco sana. La recomendación de no usar regex es totalmente correcta, pero hasta tengo problemas personales con esta publicación en SOen, y cómo se abusa de ésta para cerrar preguntas sin brindar ayuda alguna.
    – Mariano
    Commented el 24 jul. 2017 a las 9:56
  • En la teoría de Ciencias de la Computación, los lenguajes regulares son un subconjunto estricto de lenguajes libres de contexto, pero las implementaciones de expresiones regulares en lenguajes de programación modernos son muchísimo más poderosas. Los motores de regex "basados" en Perl son Turing completos. Un regex puede coincidir mucho más allá de lo que son lenguajes regulares. En la práctica, yo puedo usar normalmente un regex para procesar HTML, siempre sabiendo con total detalle cuál es el alcance, y en qué estructura podría fallar.
    – Mariano
    Commented el 24 jul. 2017 a las 9:56
2

No deberías usar expresiones regulares para procesar HTML. Al nivel que estás planteando tu expresión, tan sólo un pequeño cambio en el HTML haría que tu regex falle. Un espacio de más, un cambio en los atributos del tag, un comentario, o estructuras más complejas, harían que hasta un regex gigantesco no siga las reglas. Incluso con una expresión muy avanzada, se podría generar un caso casi a prueba de fallos, pero casi siempre podría encontrar un caso raro que haga que falle. Además, requeriría un experto cada vez que quieras modificarlo.

Es muy sencillo procesar HTML con DOM, son las herramientas que están pensadas para eso.


Si tenemos un HTML como el siguiente:

//Un HTML de ejemplo
$html = '
        <a href="https://i.sstatic.net/mOJ0a.png">
            <span>Enlace a la misma URL de la imagen</span>
            <img src="https://i.sstatic.net/mOJ0a.png" />
        </a>

        <span>Imagen independiente precedida por un </span>
        <a href="https://i.sstatic.net/mOJ0a.png">enlace</a>
        <img src="https://i.sstatic.net/mOJ0a.png" />

        <a href="./">
            <span>Enlace a una URL diferente que la imagen</span>
            <img src="https://i.sstatic.net/mOJ0a.png" />
        </a>
';

Simplemente se genera el DOM así:

//Englobamos en body
$html = "<body>$html</body>";

//Generar el DOM
$dom = new DOMDocument;
$dom->loadHTML($html, LIBXML_COMPACT | LIBXML_HTML_NOIMPLIED | LIBXML_NONET | LIBXML_HTML_NODEFDTD);

Y podemos obtener todos los enlaces dentro del DOM con:

//Obtener todos los enlaces
$a_nodelist = $dom->getElementsByTagName('a');

Para luego recorrer cada uno, verificando si tienen una imagen:

//Recorrer cada uno
foreach ($a_nodelist as $enlace) {
    //Obtener la primera imagen dentro del enlace
    $img = $enlace->getElementsByTagName('img')->item(0);
    if ($img) { //si tiene imagen
        //Comparar el enlace con la imagen
        $urlEnlace = $enlace->getAttribute('href');
        $urlImagen = $img->getAttribute('src');
        if ($urlEnlace == $urlImagen) {
            //Si son el mismo, reemplazar
            $enlace->parentNode->replaceChild($img, $enlace);
        }
    }
}

Donde $enlace->parentNode->replaceChild($img, $enlace); es la forma en que reemplazamos el enlace que tiene una imagen con la misma URL, sólo por la imagen.

Y, por último, imprimimos el resultado:

//imprimir el resultado
echo $dom->saveHTML();


Resultado:

<body>
        <img src="https://i.sstatic.net/mOJ0a.png">

        <span>Imagen independiente precedida por un </span>
        <a href="https://i.sstatic.net/mOJ0a.png">enlace</a>
        <img src="https://i.sstatic.net/mOJ0a.png">

        <a href="./">
            <span>Enlace a una URL diferente que la imagen</span>
            <img src="https://i.sstatic.net/mOJ0a.png">
        </a>
</body>


Demo:

Ver la demo en 3v4l.org

1

Se que pides pero sin duda es una complicación extra.

Con JS puedes hacerlo de una manera muy sencilla:

Como te dice @blonfu en los comentarios, con el selector a > img buscas todas las imagenes que estén dentro de un enlace <a>.

Luego con el each iteras cada una de ellas y vas cogiendo su src, pudiendo si quieres eliminarlo o modificarlo.

$("a > img").each(function() {

  console.log($(this).attr("src"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>
  <img src="esta-si-1.jpg" alt="" />
</a>

<img src="esta-no.jpg" alt="" />

<div>
  <img src="esta-tampoco.jpg" alt="" />
</div>
<a id="container">
  <img src="esta-si-2.jpg" alt="" />
  <img src="esta-si-3.jpg" alt="" />
</a>

2
  • Es una complicación extra no te digo que no. Pero JS no me sirve, tengo que usar PHP.
    – Quidi90
    Commented el 24 jul. 2017 a las 9:10
  • @Quidi90 ambos son compatibles. o es que tienes requisitos explicitos de usar PHP?
    – lois6b
    Commented el 24 jul. 2017 a las 9:13
1

Si lo que quieres es parsear:

Lo que podrías utilizar es una libreria externa "Simple HTML DOM Parser". Aunque el uso real es para hacer scraping (almenos el que yo le he dado).

// Create DOM from URL
$html = file_get_html('http://slashdot.org/');

// Find all article blocks
foreach($html->find('div.article') as $article) {
    $item['title']     = $article->find('div.title', 0)->plaintext;
    $item['intro']    = $article->find('div.intro', 0)->plaintext;
    $item['details'] = $article->find('div.details', 0)->plaintext;
    $articles[] = $item;
}

print_r($articles);

me imagino (no lo he testeado) que si haces lo siguiente, funcionaria:

$html = "<div>...<a><img></img></a>..</div>";

en la documentación oficial da ejemplo:

// Create a DOM object from a string
$html = str_get_html('<html><body>Hello!</body></html>');
2
  • La idea es buena, pero no se ajusta a mis necesidades. Ese HTML lo tengo en una base de datos (wordpress) y desde el punto de vista de un parseador no se ajusta a HTML en muchas ocasiones (algún shortcode por el medio por ejemplo)
    – Quidi90
    Commented el 24 jul. 2017 a las 9:08
  • nose cuanto deja de ajustarse a HTML, pero en la doc. pone lo siguiente "Supports invalid HTML.". Nose hasta donde llega.. pero seria probarlo
    – lmoreno
    Commented el 24 jul. 2017 a las 9:11
-4

Me auto-respondo. Mediante [^>] me he asegurado que la etiqueta no se cerrara antes de tiempo, evitando así que tomara más de una etiqueta . Al menos para mi caso concreto me ha resultado. La expresión regular ha quedado así:

'/<a[^>]*?href=\"([^>]*?)\"[^>]*?>(<img.*?src=\"(.*?)\".*?>)<\/a>/'
1

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.