Alat pemilih CSS baris perintah

15

Pertanyaan

Alat apa (lebih disukai untuk Linux) yang dapat memilih konten elemen HTML berdasarkan jalur CSS-nya?

Contoh

Misalnya, pertimbangkan dokumen HTML berikut:

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

Program baris perintah apa (misalnya, semacam "cssgrep") yang dapat mengekstraksi nilai menggunakan pemilih CSS? Itu adalah:

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

Program akan menulis yang berikut ini ke output standar:

Tabular Content 1
Tabular Content 2

tautan yang berhubungan

Terima kasih!

command-line html grep web css Dave Jarvis
sumber

Jawaban:

12

Gunakan alat W3C untuk parsing HTML / XML dan ekstraksi konten menggunakan pemilih CSS. Sebagai contoh:

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

Akan menghasilkan output yang diinginkan:

Tabular Content 1
Tabular Content 2

Menggunakan panjang garis 240 karakter memastikan bahwa elemen dengan konten panjang tidak akan terpecah di beberapa baris. The hxnormalize -xPerintah membuat dokumen XML well-formed, yang dapat digunakan oleh hxselect.

Dave Jarvis
sumber
2
Untuk pengguna macOS brew install html-xml-utils,.
anishpatel
7

Solusi CSS

Perintah Element Finder sebagian akan menyelesaikan tugas ini:

Sebagai contoh:

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

Ini membuat hasil dalam format JSON, yang dapat diekstraksi.

Solusi XML

The XML :: Ranting modul (" sudo apt-get install xml-twig-tools") dilengkapi dengan alat bernama xml_grepyang mampu melakukan hal itu, asalkan HTML Anda baik-terbentuk, tentu saja.

Maaf saya tidak dapat menguji ini saat ini, tetapi sesuatu seperti ini seharusnya berfungsi:

xml_grep -t '*/div[@class="content"]/table/tbody/tr/td[@class="data"]' file.html
Kosong satu
sumber
2

https://github.com/ericchiang/pup memiliki bahasa permintaan berbasis CSS yang sesuai dengan contoh Anda. Bahkan, dengan input Anda, perintah berikut:

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

menghasilkan:

Tabular Content 1
Tabular Content 2

Trailing text{}menghapus tag HTML.

Salah satu fitur yang bagus adalah bahwa path lengkap tidak perlu diberikan, sehingga sekali lagi dengan contoh Anda:

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

Salah satu kelebihannya pupadalah ia menggunakan paket golang.org/x/net/html untuk parsing HTML5.

puncak
sumber
0

Node dapat melakukannya dengan JQuery dan DOM palsu.

Saya membuat gambar Docker untuk itu ( 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

Argumen kedua adalah kode JavaScript, jadi Anda bisa melakukan apa pun yang Anda inginkan.

phil294
sumber