Cómo Extraer Elementos HTML de Cualquier Página Web con PHP

🔹 ¿Qué Aprenderás?

✔ Cómo procesar HTML con PHP (DOMDocument)
✔ Extraer elementos por clase o etiqueta
✔ Mostrar imágenes, videos y audio embebidos
✔ Formatear resultados de manera profesional
✔ Implementar seguridad básica contra XSS

Quiero decirle que use JS, CSS, CDN de cloudflare para iconos y demás librerías, no explico el css,JS ni HTML en este artículo para no hacerlo tan extenso y me enfoque en PHP

🔹 Código PHP Explicado

1. Estructura Básica del Procesador

El archivo procesar.php recibe una URL y decide si buscar por clase CSS o etiqueta HTML.

<?php
header('Content-Type: text/html; charset=utf-8');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $url = filter_input(INPUT_POST, 'url', FILTER_VALIDATE_URL);
  $tipo = filter_input(INPUT_POST, 'tipo', FILTER_SANITIZE_STRING);

  if (!$url) {
    die('<div >❌ URL no válida</div>');
  }

  $html = @file_get_contents($url);

  if ($html === false) {
    die('<div >❌ No se pudo obtener el contenido</div>');
  }

  $dom = new DOMDocument();
  @$dom->loadHTML($html);

  // Procesamiento de elementos...
}
?>

📌 Explicación:

• filter_input() → Filtra la URL para evitar inyecciones.
• file_get_contents() → Obtiene el HTML de la página.
• DOMDocument → Analiza el HTML para extraer elementos.

2. Búsqueda por Clase CSS

Si el usuario elige buscar por clase, usamos XPath para encontrar elementos con esa clase.

if ($tipo === 'clase') {
    $nombreClase = filter_input(INPUT_POST, 'nombreClase', FILTER_SANITIZE_STRING);
    $xpath = new DOMXPath($dom);
    $elementos = $xpath->query("//*[contains(concat(' ', normalize-space(@class), ' '), ' $nombreClase ')]");

    foreach ($elementos as $elemento) {
        $resultados[] = [
            'tag' => $elemento->tagName,
            'html' => $dom->saveHTML($elemento),
            'attributes' => getAttributes($elemento)
        ];
    }
}

📌 Explicación:

• DOMXPath → Permite consultas avanzadas en el DOM.
• contains(normalize-space(@class)) → Busca la clase exacta, evitando falsos positivos.

3. Búsqueda por Etiqueta HTML

Si el usuario busca por etiqueta (como <img>, <video>, etc.), usamos getElementsByTagName().

elseif ($tipo === 'etiqueta') {
    $nombreEtiqueta = filter_input(INPUT_POST, 'nombreEtiqueta', FILTER_SANITIZE_STRING);
    $elementos = $dom->getElementsByTagName($nombreEtiqueta);

    foreach ($elementos as $elemento) {
        $resultados[] = [
            'tag' => $nombreEtiqueta,
            'html' => $dom->saveHTML($elemento),
            'attributes' => getAttributes($elemento)
        ];
    }
}

📌 Explicación:

• getElementsByTagName() → Obtiene todos los elementos con esa etiqueta.
• saveHTML() → Convierte el elemento a texto HTML.

4. Mostrar Resultados con Soporte Multimedia

Si el elemento es una imagen, video o audio, lo mostramos de manera embebida.

function createEmbedPlayer($url, $type) {
  if ($type === 'img') {
    return '<div >
        <img src='.$url.' loading="lazy">
        <a href="'.$url.'" target="_blank">🔍 Ver original</a>
        </div>';
  }
  elseif ($type === 'video') {
    return '<video controls><source src='.$url.'></video>';
  }
  elseif ($type === 'audio') {
    return '<audio controls><source src='.$url.'></audio>';
  }
  return '';
}

📌 Explicación:

• <img loading="lazy"> → Optimiza la carga de imágenes.
• <video controls> → Agrega controles de reproducción.

5. Protección Contra XSS (Cross-Site Scripting)

Usamos htmlspecialchars() para evitar inyección de código malicioso.

echo '<pre>'.htmlspecialchars($resultado['html']).'</pre>';

📌 Explicación:

• Convierte <, >, &, etc., en entidades HTML (<, >, &).

🔹 Ejemplo de Uso

1. Extraer todas las imágenes de una web:
   • URL: https://ejemplo.com
   • Tipo: Etiqueta
   • Etiqueta: img
2. Buscar elementos con una clase específica:
   • URL: https://ejemplo.com
   • Tipo: Clase
   • Clase: menu-item

🔹 Conclusión

Esta herramienta en PHP te permite:
✅ Extraer elementos específicos de cualquier web.
✅ Mostrar contenido multimedia (imágenes, videos, audio).
✅ Protegerte contra ataques XSS.

📥 Descarga el código completo.

👀 Mira el demo y su funcionalidad aquí

https://tutoriales.esgranmore.com/extraerurl/

🚀 ¡Pruébalo en tu servidor y personalízalo!

🛡️ ¿Te preocupa la seguridad?
Si planeas usar esto en producción, considera:
✔ Limitar las URLs permitidas.
✔ Usar curl en vez de file_get_contents.
✔ Implementar un caché para no saturar el servidor.

¿Qué otras funcionalidades te gustaría agregar? ¡Déjalo en los comentarios! 👇