用cheerio检测内联元素？答案

【问题标题】：Detect inline elements with cheerio?用cheerio检测内联元素？
【发布时间】：2019-01-05 01:46:52
【问题描述】：

是否可以使用cheerio 检测内联元素？例如：

<div>
  Hello
  <strong>there</strong>
  John!
</div>

这是我想检测的内联元素的示例，因为对于读者来说，strong 标签非常明显是短语其余部分的延续。但是，与这样的东西相比：

<div>
  Jobs
  <span>Cleaner</span>
  <span>Artist</span>
</div>

这些并不完全是内联的，因为对于读者来说，它们显然是分开的。

我想我要问的是，是否可以使用cheerio 来检测元素是否夹在其父元素的文本之间？

【问题讨论】：

标签： javascript html css node.js cheerio

【解决方案1】：

注意：inline elements 这个词可能不是最好的描述您想要实现的目标。

我会采取的基本步骤是：

使用childNodes 获取子文本的节点列表和 html元素。
然后使用nodeType 或类似的方法来确定节点是否为元素或文本。
然后检查文本元素在其各自的textContent 或数据中是否包含多个空格字符。

使用 js，可以实现的一种方法是这样的：

function markSandwichedEls(parent) {
  var children = parent.childNodes;
  for (let i = 0; i < children.length; i++) {
    if (
      children[i].nodeType === 1 &&
      children[i - 1].nodeType === 3 &&
      children[i - 1].textContent.replace(/\s/g, "").length &&
      children[i + 1].nodeType === 3 &&
      children[i + 1].textContent.replace(/\s/g, "").length
    ) {
      children[i].style.backgroundColor = "red";
    }
  }
}

document.querySelectorAll("div").forEach(div => {
  markSandwichedEls(div);
});

<div>
  Hello
  <strong>there</strong> John!
</div>

<div>
  Jobs
  <span>Cleaner</span>
  <span>Artist</span>
</div>

因此，通过应用非常相似的方法，这可以在cheerio 中实现，如下所示：

const cheerio = require('cheerio')

const $ = cheerio.load(`
<div>
  Hello
  <strong>there</strong> John!
</div>

<div>
  Jobs
  <span>Cleaner</span>
  <span>Artist</span>
</div>
`)

const divs = $('div')
divs.toArray().forEach(div => {
  div.childNodes.forEach(child => {
    if (
      child.type === 'tag' && 
      child.prev.type === 'text' &&
      child.prev.data.trim() !== '' && 
      child.next.type === 'text' &&
      child.next.data.trim() !== ''
      ) {
      console.log(child)
    }
  })
})

stackblitz

【讨论】：