詳解JSOUP的Select選擇器語法

本文參考：JSOUP中文文檔

問題

你想使用類似於CSS或jQuery的語法來查找和操作元素。

方法

可以使用Element.select(String selector) 和 Elements.select(String selector) 方法實現：

//從本地加載html文件
File input = new File("/tmp/input.html");
Document doc = Jsoup.parse(input, "UTF-8", "http://example.com/");//編碼以及HTML頁面URL前戳

Elements links = doc.select("a[href]"); //帶有href屬性的a元素
Elements pngs = doc.select("img[src$=.png]"); //擴展名爲.png的圖片

Element masthead = doc.select("div.masthead").first(); //class等於masthead的div標籤

Elements resultLinks = doc.select("h3.r > a"); //在h3元素之後的a元素

說明

jsoup elements對象支持類似於CSS (或jquery)的選擇器語法，來實現非常強大和靈活的查找功能。.

這個select 方法在Document, Element,或Elements對象中都可以使用。且是上下文相關的，因此可實現指定元素的過濾，或者鏈式選擇訪問。

Select方法將返回一個Elements集合，並提供一組方法來抽取和處理結果。

Selector選擇器概述

• tagname: 通過標籤查找元素，比如：a
• ns|tag: 通過標籤在命名空間查找元素，比如：可以用 fb|name 語法來查找 <fb:name> 元素
• #id: 通過ID查找元素，比如：#logo
• .class: 通過class名稱查找元素，比如：.masthead
• [attribute]: 利用屬性查找元素，比如：[href]
• [^attr]: 利用屬性名前綴來查找元素，比如：可以用[^data-] 來查找帶有HTML5 Dataset屬性的元素
• [attr=value]: 利用屬性值來查找元素，比如：[width=500]
• [attr^=value], [attr$=value], [attr*=value]: 利用匹配屬性值開頭、結尾或包含屬性值來查找元素，比如：[href*=/path/]
• [attr~=regex]: 利用屬性值匹配正則表達式來查找元素，比如： img[src~=(?i)\.(png|jpe?g)]
• *: 這個符號將匹配所有元素

Selector選擇器組合使用

• el#id: 元素+ID，比如： div#logo
• el.class: 元素+class，比如： div.masthead
• el[attr]: 元素+class，比如： a[href]
• 任意組合，比如：a[href].highlight
• ancestor child: 查找某個元素下子元素，比如：可以用.body p 查找在”body”元素下的所有 p元素
• parent > child: 查找某個父元素下的直接子元素，比如：可以用div.content > p 查找 p 元素，也可以用body > * 查找body標籤下所有直接子元素
• siblingA + siblingB: 查找在A元素之前第一個同級元素B，比如：div.head + div
• siblingA ~ siblingX: 查找A元素之前的同級X元素，比如：h1 ~ p
• el, el, el:多個選擇器組合，查找匹配任一選擇器的唯一元素，例如：div.masthead, div.logo

僞選擇器selectors

• :lt(n): 查找哪些元素的同級索引值（它的位置在DOM樹中是相對於它的父節點）小於n，比如：td:lt(3) 表示小於三列的元素
• :gt(n):查找哪些元素的同級索引值大於n``，比如： div p:gt(2)表示哪些div中有包含2個以上的p元素
• :eq(n): 查找哪些元素的同級索引值與n相等，比如：form input:eq(1)表示包含一個input標籤的Form元素
• :has(seletor): 查找匹配選擇器包含元素的元素，比如：div:has(p)表示哪些div包含了p元素
• :not(selector): 查找與選擇器不匹配的元素，比如： div:not(.logo) 表示不包含 class=logo 元素的所有 div 列表
• :contains(text): 查找包含給定文本的元素，搜索不區分大不寫，比如： p:contains(jsoup)
• :containsOwn(text): 查找直接包含給定文本的元素
• :matches(regex): 查找哪些元素的文本匹配指定的正則表達式，比如：div:matches((?i)login)
• :matchesOwn(regex): 查找自身包含文本匹配指定正則表達式的元素
• 注意：上述僞選擇器索引是從0開始的，也就是說第一個元素索引值爲0，第二個元素index爲1等

可以查看Selector API參考來了解更詳細的內容

如何選擇多個class值的元素

示例：<ul class="ul-ss-3 jb-xx-ks">

方法:

Elements select = document.select(".ul-ss-3").select(".jb-xx-bw");

或者

Elements select = document.getElementsByClass("ul-ss-3 jb-xx-bw");

Selector API文檔

官方API原文：Selector (jsoup Java HTML Parser 1.11.3 API)

Pattern	Matches	Example
*	任何元素	*
tag	具有給定標籤名的元素	div
`*	E`	類型E在任何名稱空間中的元素。
`ns	E`	類型E在名稱空間中的元素。
#id	具有“ID”屬性ID的元素	div#wrap, #logo
.class	類名爲“class”的元素	div.left, .result
[attr]	屬性爲“attr”(任何值)的元素	a[href], [title]
[^attrPrefix]	屬性名稱以“attrPrefix”開頭的元素。使用HTML5數據集查找元素	[^data-], div[^data-]
[attr=val]	元素的屬性爲“attr”，值爲“val”	img[width=500], a[rel=nofollow]
[attr="val"]	元素的屬性爲“attr”，值爲“val”	span[hello="Cleveland"][goodbye="Columbus"], a[rel="nofollow"]
[attr^=valPrefix]	元素的屬性爲“attr”，值以“valPrefix”開頭	a[href^=http:]
[attr$=valSuffix]	元素的屬性爲“attr”，值以“valfix”結尾	img[src$=.png]
[attr*=valContaining]	元素的屬性爲“attr”，包含屬性值“valcontains”	a[href*=/search/]
[attr~=*regex*]	元素具有名爲“attr”的屬性，值與正則表達式匹配	`img[src~=(?i)\.(png
	以上可以按任何順序合併。	div.header[title]

關係選擇器Combinators

Pattern	Matches	Example
E F	由E元素衍生而來的F元素	div a, .logo h1
E > F	F是E的直接子結點	ol > li
E + F	一個F元素，緊接在E的前面	li + li, div.head + div
E ~ F	在F元素前面加上E	h1 ~ p
E, F, G	所有匹配元素E F G	a[href], div, h3

Pseudo selectors

Pattern	Matches	Example
:lt(*n*)	其同胞指數小於n的元素	td:lt(3) 找到每一行的前3個單元格
:gt(*n*)	其同胞指數大於n的元素	td:gt(1) 在跳過前兩個單元后查找單元格
:eq(*n*)	其同胞指數等於n的元素	td:eq(0) 找到每一行的第一個單元格
:has(*selector*)	包含至少一個與選擇器匹配的元素的元素	div:has(p) 查找包含p元素的div
:not(*selector*)	不匹配選擇器的元素。參見Elements.not(String)	div:not(.logo) 查找所有沒有“logo”類的divs。 div:not(:has(div)) 查找不包含div的div。
:contains(*text*)	包含指定文本的元素。搜索是大小寫不敏感的。文本可以出現在找到的元素中，也可以出現在它的任何後代元素中。	p:contains(jsoup) 查找包含“jsoup”文本的p元素。
:matches(*regex*)	其文本與指定正則表達式匹配的元素。文本可以出現在找到的元素中，也可以出現在它的任何後代元素中。	td:matches(\\d+) 查找包含數字的表單元格。 div:matches((?i)login) 找到包含文本的div，不敏感的情況。
:containsOwn(*text*)	直接包含指定文本的元素。搜索是大小寫不敏感的。文本必須出現在找到的元素中，而不是它的任何後代元素中。	p:containsOwn(jsoup) 查找具有自己的文本“jsoup”的p元素。
:matchesOwn(*regex*)	元素，其自身的文本與指定的正則表達式匹配。文本必須出現在找到的元素中，而不是它的任何後代元素中。	td:matchesOwn(\\d+) 查找直接包含數字的表單元格。 div:matchesOwn((?i)login) 找到包含文本的div，不敏感的情況。
:containsData(*data*)	包含指定數據的元素。script和style的內容元素,和comment節點(等)被認爲是數據節點,而不是文本節點。搜索是大小寫不敏感的。數據可能出現在已找到的元素中，也可能出現在其任何子代中。	script:contains(jsoup) 查找包含數據“jsoup”的腳本元素。
	上述可按任何順序與其他選擇器組合	.light:contains(name):eq(0)
:matchText	將文本節點視爲元素，因此允許您匹配並選擇文本節點。注意，使用此選擇器將修改DOM，因此您可能希望在使用之前克隆文檔。	p:matchText:firstChild 與輸入 <p>One<br />Two</p> 將返回一個 PseudoTextElement 與文本 “One“.

Structural pseudo selectors

Pattern	Matches	Example
:root	元素是文檔的根。在HTML中，這是 html 元素	:root
:nth-child(*a*n+*b*)	在文檔樹中有*a*n+*b*-1兄妹的元素，對於任何正整數或零值的n，並具有父元素。對於a和b大於零的值，這有效地將元素的子元素劃分爲元素的組(最後一個組取其餘的部分)，並選擇每個組的第*b*th元素。例如，這允許選擇器處理表中的其他行，並可以用於在一個4週期中替換段落文本的顏色。 a和b的值必須是整數(正數、負數或零)。元素的第一個子元素的索引是1。除此之外, :nth-child() 可以採用奇數和偶數作爲參數。 奇數與2n+1的意義相同，偶數與2n的意義相同。	tr:nth-child(2n+1) 查找表中的每一行。 :nth-child(10n-1) 第9，第19，第29，等等，元素。 li:nth-child(5) the 5h li
:nth-last-child(*a*n+*b*)	在文檔樹中後面有*a*n+*b*-1兄弟元素。否則像:nth-child()	tr:nth-last-child(-n+2) 表的最後兩行
:nth-of-type(*a*n+*b*)	僞類表示法表示一個元素，該元素具有*a*n+*b*-1個兄弟元素，在文檔樹前具有相同的擴展元素名，對於任何0或正整數值爲n，並且具有父元素	img:nth-of-type(2n+1)
:nth-last-of-type(*a*n+*b*)	僞類表示法表示一個元素，該元素具有*a*n+*b*-1個兄弟元素，在文檔樹中，對於任何0或正整數值爲n的元素，該元素具有一個父元素	img:nth-last-of-type(2n+1)
:first-child	元素是其他元素的第一個子元素。	div > p:first-child
:last-child	其他元素的最後一個子元素。	ol > li:last-child
:first-of-type	在父元素的子元素列表中是其類型的第一個兄弟元素	dl dt:first-of-type
:last-of-type	元素，它是其父元素的子元素列表中類型的最後一個兄弟元素。	tr > td:last-of-type
:only-child	具有父元素且父元素沒有其他元素子元素的元素
:only-of-type	具有父元素的元素，其父元素沒有具有相同展開元素名稱的其他元素子元素
:empty	沒有孩子的元素。