Herramienta de selector de CSS de línea de comandos

12

Pregunta

¿Qué herramienta (preferiblemente para Linux) puede seleccionar el contenido de un elemento HTML en función de su ruta CSS?

Ejemplo

Por ejemplo, considere el siguiente documento HTML:

<html>
<body>
  <div class="header">
  <h1>Header</h1>
  </div>
  <div class="content">
    <table>
      <tbody>
      <tr><td class="data">Tabular Content 1</td></tr>
      <tr><td class="data">Tabular Content 2</td></tr>
      </tbody>
    </table>
  </div>
  <div class="footer">
  <p>Footer</p>
  </div>
</body>
</html>

¿Qué programa de línea de comandos (por ejemplo, una especie de "cssgrep") puede extraer valores usando un selector CSS? Es decir:

cssgrep page.html "body > div.content > table > tbody > tr > td.data"

El programa escribiría lo siguiente en la salida estándar:

Tabular Content 1
Tabular Content 2

enlaces relacionados

¡Gracias!

command-line html grep web css Dave Jarvis
fuente

Respuestas:

9

Use las herramientas W3C para el análisis y extracción de contenido HTML / XML utilizando selectores CSS. Por ejemplo:

hxnormalize -l 240 -x filename.html | hxselect -s '\n' -c "td.data"

Producirá la salida deseada:

Tabular Content 1
Tabular Content 2

El uso de una longitud de línea de 240 caracteres garantiza que los elementos con contenido largo no se dividirán en varias líneas. El hxnormalize -xcomando crea un documento XML bien formado, que puede ser utilizado por hxselect.

Dave Jarvis
fuente
Para los usuarios de MacOS, brew install html-xml-utils.
anishpatel
7

Solución CSS

El comando Buscador de elementos realizará parcialmente esta tarea:

Por ejemplo:

elfinder -j -s td.data -x "html"

Esto representa el resultado en formato JSON, que se puede extraer.

Solución XML

El módulo XML :: Twig (" sudo apt-get install xml-twig-tools") viene con una herramienta llamada xml_grepque puede hacer exactamente eso, siempre que su HTML esté bien formado, por supuesto.

Lo siento, no puedo probar esto en este momento, pero algo como esto debería funcionar:

xml_grep -t '*/div[@class="content"]/table/tbody/tr/td[@class="data"]' file.html
Cero uno
fuente
1

https://github.com/ericchiang/pup tiene un lenguaje de consulta basado en CSS que se ajusta estrechamente a su ejemplo. De hecho, con su entrada, el siguiente comando:

pup "body > div.content > table > tbody > tr > td.data text{}"

produce:

Tabular Content 1
Tabular Content 2

El final text{}elimina las etiquetas HTML.

Una buena característica es que no es necesario dar la ruta completa, de modo que nuevamente con su ejemplo:

$ pup 'td.data text{}' < input.html
Tabular Content 1
Tabular Content 2

Una ventaja de esto pupes que utiliza el paquete golang.org/x/net/html para analizar HTML5.

pico
fuente
0

Node puede hacer eso con JQuery y un DOM falso.

Hice una imagen de Docker para eso ( https://hub.docker.com/r/phil294/jquery-jsdom/ ):

docker run --rm -i phil294/jquery-jsdom '$("body > div.content > table > tbody > tr > td.data").text()' < page.html

El segundo argumento es el código JavaScript, por lo que puede hacer lo que quiera, de verdad.

Blauhirn
fuente