如何使用 cheerio 获取下一个文本节点

Question

<p>
<i class="icon-home"></i>
address
<br>
<i class="icon-website"></i>
http://www.website.com
<br>
<i class="icon-tel"></i>
phone number
<br>
<i class="icon-mail"></i>
<a href="mailto:email@mail.com">Contact email</a>
<br>
</p>

我正在尝试获取“地址”、“http://www.website.com”和“phone 号码”。

const address = $("i.icon-home").next();
const website = $("i.icon-website").next();
const phoneNumber = $("i.icon-tel").next();

使用 next() 给我下一个 <br> 元素。如何获取下一个文本元素？

Answer 1

Cheerio 的各种jQuery-ish 方法主要针对Element 节点，而您正在寻找Text 节点的内容。

给定您所展示的 HTML 的最简单方法是使用底层 DOM(like) 元素的 nextSibling 来访问其下一个兄弟节点（这将是文本节点) 并通过 nodeValue:

从中获取文本

const address = $("i.icon-home")[0].nextSibling.nodeValue;
const website = $("i.icon-website")[0].nextSibling.nodeValue;
const phoneNumber = $("i.icon-tel")[0].nextSibling.nodeValue;

([0] 访问 Cheerio 集合中第一个匹配的 DOM(ish) 元素。）

对此有几点说明：

您可能希望 trim 关闭空格（通过调用 trim()），因为文本节点开头和结尾的空格被保留。
如果您不确定图像后面是否会有文本节点（或实际上任何节点），您可能想要更具防御性：

const getNextText = (element) => {
    if (!element.nodeName) { // If it's a Cheerio object...
        element = element[0];
    }
    const next = element.nextSibling;
    return next?.nodeType === 3 ? next.nodeValue.trim() : "";
};

然后

const address = getNextText($("i.icon-home"));
const website = getNextText($("i.icon-website"));
const phoneNumber = getNextText($("i.icon-tel"));

如何使用 cheerio 获取下一个文本节点

How to get next text node with cheerio

javascript

node.js

cheerio