最近在項目中做一個需求，將一個網頁中的外部的圖片下載到我們自己的服務器，方法就是對html裏的內容匹配出img標籤的src的地址，然後利用這個地址下載圖片，但總是會出現有的src的地址不是正確的圖片資源，出現下載錯誤的情況，而我在img標籤中發現還有data-src屬性或者original-src屬性，且這些屬性裏的地址是可下載的。
這就爲我帶來一個思路，匹配出img標籤中所有屬性中包含src字符串的都篩選出來。如果src的地址下載不了，那就用data-src或者其他的帶src字符串屬性的地址去下載。
關於怎麼獲取img標籤中的src的屬性，大家可能都瞭解用正則表達式去匹配。
這裏先用正則表達式做個小測試吧：
String html="<p>pic1:<img width=\"200\" data-src=\"/image/261/1.jpeg\" alt=\"\"/> pic2: <img width=\"200\" src=\"/image/751/3.jpg\" alt=\"\"/>,pic3:<img width=\"200\" src=\"/image/132/5.jpeg\" alt=\"\"/></p>";
Pattern p = Pattern.compile("<img[^>]+src\\s*=\\s*['\"]([^'\"]+)['\"][^>]*>");
Matcher m = p.matcher(html);
while(m.find()){
//整個img標籤
System.out.println("img標籤-------------"+m.group());
//src屬性
System.out.println("src屬性-------------"+m.group(1));
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
輸出結果：
img標籤-------------<img width="200" data-src="/image/261/1.jpeg" alt=""/>
src屬性-------------/image/261/1.jpeg
img標籤-------------<img width="200" src="/image/751/3.jpg" alt=""/>
src屬性-------------/image/751/3.jpg
img標籤-------------<img width="200" src="/image/132/5.jpeg" alt=""/>
src屬性-------------/image/132/5.jpeg
今天剛接觸用jsoup去解析html標籤，發現非常方便，比用自己辛辛苦苦去寫正則方便多了，正則整個寫完，過一段時間再來看這個正則表達式，估計就看不懂了。
下面就介紹用jsoup解析網頁：
我截取下面這個網址的部分源代碼
http://domestic.firefox.sina.com/17/0412/08/4OPJ52GTXH0M3V9W.html
部分源代碼
<li><a href="http://domestic.firefox.sina.com/" title="國內">國內</a></li>
<li><a href="http://world.firefox.sina.com/" title="國際">國際</a></li>
<li><a href="http://mil.firefox.sina.com/" title="軍事">軍事</a></li>
<li><a href="http://photo.firefox.sina.com/" title="圖片">圖片</a></li>
<li><a href="http://society.firefox.sina.com/" title="社會">社會</a></li>
<li><a href="http://ent.firefox.sina.com/" title="娛樂">娛樂</a></li>
<li><a href="http://tech.firefox.sina.com/" title="科技">科技</a></li>
<li><a href="http://sports.firefox.sina.com/" title="體育">體育</a></li>
<li><a href="http://finance.firefox.sina.com/" title="財經">財經</a></li>
<li><a href="http://auto.firefox.sina.com/" title="汽車">汽車</a></li> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
<img src="http://img.firefoxchina.cn/2016/07/1/201607131534240.png" alt="新浪國內">
<img src="/static/images/photo.jpg" data-original="http://n.sinaimg.cn/news/crawl/20170412/tUlE-fyecrxv5553275.jpg" alt="衡水中學進浙江引熱議 當地校長:辦學還是辦廠">
<img src="/static/images/photo.jpg" data-original="http://n.sinaimg.cn/news/transform/20170412/NCxo-fyecfam0409134.jpg" alt="《奔跑吧兄弟》被指抄襲葫蘆娃 被訴索賠200萬">
<img src="/static/images/photo.jpg" data-original="http://n.sinaimg.cn/news/transform/20170412/QEZ5-fyecfam0405087.jpg" alt="對抗巡視組 他們用特鹹飯菜等招數公開挑釁">
<img src="/static/images/photo.jpg" data-original="http://n.sinaimg.cn/news/transform/20170412/TfuR-fyecezv3239499.jpg" alt="外媒:中國貿易商接通知退回十多船朝鮮煤炭">
<img src="/static/images/photo.jpg" data-original="http://n.sinaimg.cn/news/transform/20170412/eNkL-fyecezv3239189.jpg" alt="中國工資低？ 上海最低工資已超部分東歐國家">
<img src="/static/images/photo.jpg" data-original="http://n.sinaimg.cn/translate/20170412/hPZz-fyecezv3239988.jpg" alt="貴州省副省長慕德貴兼任省委宣傳部部長(圖)">
<img src="/static/images/photo.jpg" data-original="http://n.sinaimg.cn/translate/20170412/ufxr-fyecezv3235689.jpg" alt="一則公告讓許晴王學兵等明星瞬間蒸發6000多萬">
<img src="/static/images/photo.jpg" data-original="http://n.sinaimg.cn/news/crawl/20170412/4DGJ-fyecfam0401539.jpg" alt="武漢留美女生曾親歷美聯航驅客:被壯漢架下飛機">
<img src="http://static.firefoxchina.cn/img/201701/7_587834a17cfee0.png">
<img src="http://static.firefoxchina.cn/img/201701/7_5876ea657366d0.png">- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
我們不再用正則表達式去獲取這裏a標籤裏的href屬性以及img標籤裏的src屬性，而是用jsoup的方法去解析。
到網上下載jsoup的jar包，我分享到百度雲盤了：http://pan.baidu.com/s/1jIE7fBS，將jar包添加到我們的項目中。
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
public class TestJsoup {
public static void main(String[] args) throws Exception {
Document doc = Jsoup.connect("http://domestic.firefox.sina.com/17/0412/08/4OPJ52GTXH0M3V9W.html").get();
//獲取 帶有src屬性的img元素
Elements imgTags = doc.select("img[src]");
System.out.println("=====imgsTag===="+imgTags);
for(Element element:imgTags){
String src=element.attr("abs:src");//獲取src的絕對路徑
String src2=element.attr("src");//獲取src的絕對路徑
System.out.println("===src==="+src);
System.out.println("===src2==="+src2);
}
//獲取 帶有href屬性的a元素
Elements aTag = doc.select("a[href]");
System.out.println("=====aTag===="+aTag);
for(Element element :aTag){
String href=element.attr("href");
System.out.println("===href==="+href);
}
//所有引用jpg圖片的元素
Elements jpgs = doc.select("img[src$=.jpg]");
for(Element element :jpgs){
String src=element.attr("abs:src");
System.out.println("===src==="+src);
}
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
代碼中
String src=element.attr("abs:src");
String src2=element.attr("src");
區別就是前者可以獲取到src地址的絕對路徑。
Element的attr方法，獲取的是屬性名爲“src”的值，如果我們要像上面的正則表達式一樣，將屬性名中包含字符串”src”的屬性也獲取到，但是我們不知道這個包含“src”字符串的屬性到底是什麼，可能是data-src，也可能是original-src，甚至是其他的，這種情況我們只能變歷img標籤中的所有屬性了。
比如像下面的這種情況，我們獲取data-src的屬性。
<p><img data-src="http://mmbiz.qpic.cn/mmbiz_jpg/LoyT0npAgkkRjJibID5PXg2zT6iarg9IMkdqpvGv58Fq9tSGUGibZibX2uYfibIryXPuwX44SRjGrY4JURnAvPqvaOQ/0?wx_fmt=jpeg" data-ratio="0.66625" data-w="800" src="http://mmbiz.qpic.cn/mmbiz_jpg/LoyT0npAgkkRjJibID5PXg2zT6iarg9IMkdqpvGv58Fq9tSGUGibZibX2uYfibIryXPuwX44SRjGrY4JURnAvPqvaOQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1" data-fail="0" alt="" /></p>- 1
可以遍歷img標籤的屬性：
Document doc = Jsoup.connect("http://domestic.firefox.sina.com/17/0412/08/4OPJ52GTXH0M3V9W.html").get();
//獲取 帶有src屬性的img元素
Elements imgTags = doc.select("img[src]");
for(Element element:imgTags){
Attributes node=element.attributes();
Iterator<Attribute> iterator=node.iterator();
while (iterator.hasNext()) {
Attribute attribute=iterator.next();
String key=attribute.getKey();
//屬性中包含“src”字符串，但不是src的屬性
if (!key.equals("src")&&key.indexOf("src")!=-1) {
//element.removeAttr(key);
String otherSrc=attribute.getValue();
System.out.println("====otherSrc===="+otherSrc);
break;
}
}
}