Outil de sélection CSS en ligne de commande

15

Question

Quel outil (de préférence pour Linux) peut sélectionner le contenu d'un élément HTML en fonction de son chemin CSS?

Exemple

Par exemple, considérez le document HTML suivant:

<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>

Quel programme de ligne de commande (par exemple, une sorte de "cssgrep") peut extraire des valeurs à l'aide d'un sélecteur CSS? C'est:

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

Le programme écrirait ce qui suit sur la sortie standard:

Tabular Content 1
Tabular Content 2

Liens connexes

Je vous remercie!

command-line html grep web css Dave Jarvis
la source

Réponses:

12

Utilisez les outils W3C pour l'analyse HTML / XML et l'extraction de contenu à l'aide de sélecteurs CSS. Par exemple:

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

Produira la sortie souhaitée:

Tabular Content 1
Tabular Content 2

L'utilisation d'une longueur de ligne de 240 caractères garantit que les éléments dont le contenu est long ne seront pas répartis sur plusieurs lignes. La hxnormalize -xcommande crée un document XML bien formé, qui peut être utilisé par hxselect.

Dave Jarvis
la source
2
Pour les utilisateurs de Mac OS, brew install html-xml-utils.
anishpatel
7

Solution CSS

La commande Element Finder accomplira partiellement cette tâche:

Par exemple:

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

Cela rend le résultat au format JSON, qui peut être extrait.

Solution XML

Le module XML :: Twig (" sudo apt-get install xml-twig-tools") est livré avec un outil nommé xml_grepqui est capable de faire exactement cela, à condition que votre HTML soit bien formé, bien sûr.

Je suis désolé de ne pas pouvoir tester cela pour le moment, mais quelque chose comme ça devrait fonctionner:

xml_grep -t '*/div[@class="content"]/table/tbody/tr/td[@class="data"]' file.html
Zéro un
la source
2

https://github.com/ericchiang/pup possède un langage de requête basé sur CSS qui se conforme étroitement à votre exemple. En fait, avec votre entrée, la commande suivante:

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

produit:

Tabular Content 1
Tabular Content 2

La fin text{}supprime les balises HTML.

Une caractéristique intéressante est que le chemin complet n'a pas besoin d'être donné, de sorte que, avec votre exemple:

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

Un avantage pupest qu'il utilise le package golang.org/x/net/html pour analyser HTML5.

de pointe
la source
0

Node peut le faire avec JQuery et un faux DOM.

J'ai créé une image Docker pour cela ( 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

Le deuxième argument est le code JavaScript, donc vous pouvez vraiment faire tout ce que vous voulez.

phil294
la source