Cara mengekstrak teks yang dipisahkan oleh tag HTML yang berbeza dalam Cheerio

Question

Saya cuba mengekstrak rentetan teks khusus berikut sebagai output yang berasingan, contohnya (mengambilnya daripada HTML di bawah):

let text = "Ini ialah teks pertama yang saya perlukan";
let text2 = "Ini adalah teks kedua yang saya perlukan";
let text3 = "Ini adalah teks ketiga yang saya perlukan";

Saya benar-benar tidak tahu cara mengasingkan teks dengan teg HTML yang berbeza. 

   Count:31

   Sesuatu: Ini ialah teks pertama yang saya perlukan
   Sesuatu2: Ini ialah teks kedua yang saya perlukan
   
Sesuatu3:



            

Answer 1

Cuba sesuatu seperti ini dan lihat jika ia berkesan:

html = `your sample html above`

domdoc = new DOMParser().parseFromString(html, "text/html")
result = domdoc.evaluate('//text()[not(ancestor::span)]', domdoc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

for (let i = 0; i < result.snapshotLength; i++) {
  target = result.snapshotItem(i).textContent.trim()
  if (target.length > 0) {
    console.log(target);
  }
}

Menggunakan html contoh anda, output hendaklah:

"That's the first text I need"
"The second text I need"
"The third text I need"

Answer 2

Anda boleh mengulang <p> 的子节点，并获取任何非空内容的 nodeType === Node.TEXT_NODE:

for (const e of document.querySelector("p").childNodes) {
  if (e.nodeType === Node.TEXT_NODE && e.textContent.trim()) {
    console.log(e.textContent.trim());
  }
}

// 或者创建一个数组：
const result = [...document.querySelector("p").childNodes]
  .filter(e =>
    e.nodeType === Node.TEXT_NODE && e.textContent.trim()
  )
  .map(e => e.textContent.trim());
console.log(result);

<p>
  <span class="hidden-text">
    <span class="ft-semi">Count:</span>
    31
    <br>
  </span>
  <span class="ft-semi">Something:</span>
  That's the first text I need
  <span class="hidden-text">
    <span class="ft-semi">Something2:</span>
  </span>
  The second text I need
  <br>
  <span class="ft-semi">Something3:</span>
  The third text I need
</p>