如何使用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:[e-mail]">Contact email</a>
<br>
</p>

我正试图得到"；地址"http://www.website.com"以及"；电话号码"；。

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(类似(元素的nextSibling访问其下一个同级节点(将是Text节点(，并通过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(元素。(

有几个注意事项：

1. 您可能需要修剪空白(通过调用trim()(，因为Text节点开头和结尾的空白会保留下来。

2. 如果你不确定图像后面是否会有一个文本节点(或者任何节点(，你可能需要更具防御性：

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"));