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!

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.


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

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.


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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.