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!

— Dave Jarvis
source

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

Outil de sélection CSS en ligne de commande

Question

Exemple

Liens connexes

Solution CSS

Solution XML