使用 Jsoup 处理 CSS class 名称中的空格
Deal with whitespaces in CSS class names with Jsoup
我想select此页面的一些超市产品信息:
http://www.angeloni.com.br/super/index?grupo=15022
为此我应该 select <ul>
标签 class "lstProd "
:
如果 class 名称是 "lstProd"
会很容易,但问题是名称末尾的空格。我无法让 Jsoup 处理它。
我尝试了下面的代码和其他方法,但它总是得到一个空列表。
org.jsoup.nodes.Document document = Jsoup.connect("http://www.angeloni.com.br/super/index?grupo=15022").get();
org.jsoup.select.Elements list = doc.select("ul.lstProd ");
我要获取的html页面的代码片段:
<ul class="lstProd ">
<li>
<span class="cod">CÓD. 1341372</span>
<span class="lnkImgProd">
<a href="/super/produto?grupo=15022&idProduto=1341372">
<img src="http://assets.angeloni.com.br/files/images/7/1B/C6/1341372_1_V.jpg" width="120" height="120"
alt="Creme Dental SORRISO Super Refrescante Tubo 90g">
</a>
</span>
<div class="RgtDetProd">
<div class="boxInfoProd">
<span class="descr">
<a href="/super/produto?grupo=15022&idProduto=1341372">Creme Dental SORRISO Super Refrescante
Tubo 90g</a>
</span>
<ul class="lstProdFlags after">
</ul>
</div>
...
我认为您面临两个完全不同的问题:
Jsoup 没有加载您认为它加载的网站。您指定的网站通过 JavaScript 呈现其内容,并在初始页面加载后通过 AJAX 加载一些内容。 JSoup 不能处理这个。您要么需要调查 AJAX 调用并直接使用 Jsoup 获取它们,要么使用类似 selenium webdriver 的东西在真正的浏览器中获取页面,这将按照您的预期呈现所有内容。
CSS class 出于实际目的名称不能包含空格 1。在 HTML 中,空格用作 class 名称之间的分隔符。因此 <ul class="lstProd ">
与 <ul class="lstProd">
相同。然而,在 CSS 选择器中,class 名称由 .className
指定,即点后跟 class 名称。您可以像这样连接多个 classes:element.select(".className1.className2")
1 从技术上讲,您可以在 CSS class 中放置空格,但您需要使用 '\ '
来转义它们。参见 https://mathiasbynens.be/notes/css-escapes or Which characters are valid in CSS class names/selectors?
编辑:更准确地描述 CSS class 名称
CSS class 名称 可以 包含空格。
<ul class="lstProd ">
NOT 与 <ul class="lstProd">
相同。
而且我可以看到您有多个 <ul>
具有相同的 class 名称。
检查或遍历此类元素的更好方法是 nth-child
因此,要找到所需的选择器,您可以使用 #abaProd > ul:nth-child(4)
For more details about nth-child
我想select此页面的一些超市产品信息:
http://www.angeloni.com.br/super/index?grupo=15022
为此我应该 select <ul>
标签 class "lstProd "
:
如果 class 名称是 "lstProd"
会很容易,但问题是名称末尾的空格。我无法让 Jsoup 处理它。
我尝试了下面的代码和其他方法,但它总是得到一个空列表。
org.jsoup.nodes.Document document = Jsoup.connect("http://www.angeloni.com.br/super/index?grupo=15022").get();
org.jsoup.select.Elements list = doc.select("ul.lstProd ");
我要获取的html页面的代码片段:
<ul class="lstProd ">
<li>
<span class="cod">CÓD. 1341372</span>
<span class="lnkImgProd">
<a href="/super/produto?grupo=15022&idProduto=1341372">
<img src="http://assets.angeloni.com.br/files/images/7/1B/C6/1341372_1_V.jpg" width="120" height="120"
alt="Creme Dental SORRISO Super Refrescante Tubo 90g">
</a>
</span>
<div class="RgtDetProd">
<div class="boxInfoProd">
<span class="descr">
<a href="/super/produto?grupo=15022&idProduto=1341372">Creme Dental SORRISO Super Refrescante
Tubo 90g</a>
</span>
<ul class="lstProdFlags after">
</ul>
</div>
...
我认为您面临两个完全不同的问题:
Jsoup 没有加载您认为它加载的网站。您指定的网站通过 JavaScript 呈现其内容,并在初始页面加载后通过 AJAX 加载一些内容。 JSoup 不能处理这个。您要么需要调查 AJAX 调用并直接使用 Jsoup 获取它们,要么使用类似 selenium webdriver 的东西在真正的浏览器中获取页面,这将按照您的预期呈现所有内容。
CSS class 出于实际目的名称不能包含空格 1。在 HTML 中,空格用作 class 名称之间的分隔符。因此
<ul class="lstProd ">
与<ul class="lstProd">
相同。然而,在 CSS 选择器中,class 名称由.className
指定,即点后跟 class 名称。您可以像这样连接多个 classes:element.select(".className1.className2")
1 从技术上讲,您可以在 CSS class 中放置空格,但您需要使用 '\ '
来转义它们。参见 https://mathiasbynens.be/notes/css-escapes or Which characters are valid in CSS class names/selectors?
编辑:更准确地描述 CSS class 名称
CSS class 名称 可以 包含空格。
<ul class="lstProd ">
NOT 与 <ul class="lstProd">
相同。
而且我可以看到您有多个 <ul>
具有相同的 class 名称。
检查或遍历此类元素的更好方法是 nth-child
因此,要找到所需的选择器,您可以使用 #abaProd > ul:nth-child(4)
For more details about nth-child