Cheerio: 如何通过文本内容选择元素？

Question

我有一些像这样的 HTML：

<span id="cod">Code:</span> <span>12345</span>
<span>Category:</span> <span>faucets</span>

我想获取类别名称（“水龙头”）。 这是我的尝试：

var $ = cheerio.load(html.contents);
var category = $('span[innerHTML="Category:"]').next().text();

但这不起作用（

innerHTML

修改器不会选择任何内容）。

有什么线索吗？

Answer 1

您的代码不起作用的原因是因为

[innerHTML]

是一个属性选择器，而

innerHTML

不是元素上的属性（这意味着没有选择任何内容）。

您可以根据文本过滤

span

元素。在下面的示例中，

.trim()

用于修剪掉任何空白。如果文本等于“类别：”，则该元素包含在已过滤的返回元素集中。

var category = $('span').filter(function() {
  return $(this).text().trim() === 'Category:';
}).next().text();

---

如果元素的文本恰好是“类别：”，上面的代码片段将过滤元素。如果您想选择文本包含该字符串的元素，您可以使用

:contains

选择器（如评论中指出的）：

var category = $('span:contains("Category:")').next().text();

或者，使用

.indexOf()

方法也可以：

var category = $('span').filter(function() {
  return $(this).text().indexOf('Category:') > -1;
}).next().text();

Answer 2

更简单的解决方案是：

var category = $('span:contains("Category:") + span').text()

这是 css 加上

:contains

伪代码，它是 jQuery 的一部分，并受 Cheerio 支持。

Answer 3

现有的答案很好，但是

.find()

似乎是完成这项工作的一个很好的工具：

import cheerio from "cheerio"; // ^1.0.0-rc.12

const html = `
<span id="cod">Code:</span> <span>12345</span>
<span>Category:</span> <span>faucets</span>`;

const $ = cheerio.load(html);
const target = "faucets";
const el = [...$("span")].find(e => $(e).text().trim() === target);
console.log($(el).text()); // => faucets

// or by substring:
const target1 = "auc";
const el1 = [...$("span")].find(e => $(e).text().includes(target1));
console.log($(el1).text()); // => faucets

如果您可能不知道标签并想要纯文本搜索，而不需要

:contains()

伪选择器的子字符串行为：

const findByExactText = (els, target) => {
  const TEXT_NODE = 3;

  for (const el of els) {
    for (const child of $(el).contents()) {
      if (
        child.nodeType === TEXT_NODE &&
        child.nodeValue.trim() === target
      ) {
        return el;
      }
    }
  }
};

console.log($(findByExactText($("*"), "faucets")).text()); // => faucets