Android中解析html網頁

本文主要記錄通過網頁解析得到自己想要的數據,也就是一個簡單的爬蟲。將使用第三方庫jsoup實現,通過第三方庫,能夠快速方便的解析html。在開始之前,需要具備以下能力:

  • 首先,需要對網頁編程有一點了解,知道一個頁面的結構,標籤的含義,知道html網頁其實是一種xml格式的文件。如果對這些都瞭解的話,就可以很方便的進行網頁解析了,如果不太熟悉,建議先了解一下網頁編程。
  • 然後,在使用第三方庫之前,最好是先看一下官方文檔:Jsoup官方文檔Jsoup文檔中文版

接下來就通過一個具體需求來實現。假設需求是一個Android端的博客瀏覽器,第一頁是博客標題的列表,點擊單個標題可以進入第二個頁面,第二個頁面是一個WebView,通過第一個頁面傳入的url加載指定博客的網頁。以上這個簡單的需求,兩個頁面實現,當然重點是在第一個頁面,怎樣獲取博客標題的列表?

1.分析網頁結構

在解析一個網頁之前,需要先了解這個網頁的結構,在PC端通過瀏覽器的開發者工具就能很方便的查看網頁結構,比如在Chrome中,按F12就可以出現開發者工具。接下來就是分析博客列表頁面的結構:
根據需求,我要得到博客標題的列表,於是,在Chrome中,打開指定頁面,右鍵選擇某個標題,選擇“審查元素”在右邊就能看到指定標題的代碼:
這裏寫圖片描述

從網頁源碼中,需要的內容的結構:

  <span class="link_title"><a href="/ttccaaa/article/details/49282851">
        Win10與Ubuntu 15.04雙系統安裝方法            
        </a></span>

一個< span >標籤,裏面有一個超鏈接標籤< a >,鏈接指向博客內容的網頁,到此,思路就比較清晰了,只需要提取出當前頁面中class爲“link_title”的< span >標籤下的超鏈接標籤< a >的內容即可,然後封裝到ListView中,顯示到界面,就能實現功能了。

2.配置jsoup

關於jsoup的介紹和使用可以從官網瞭解到,下面開始配置和使用:

2.1 下載:

首先需要下載jar包,目前最新版是1.8.3,如果只是簡單的使用,可以只下載jsoup-1.8.3.jar 官方下載:jsoup下載

2.2 添加依賴:

如同以前的步驟,先將下載的jar包放在libs下,然後對它右鍵選擇“Add As Library”這樣就完成了依賴添加。

3. 寫代碼

根據上面的分析,需要找到文章標題,首先要找到class=”link_title”的< span >標籤,然後獲取到其中的< a >標籤的屬性和內容,就是需要的標題和url,所以,第一步,先寫一個bean,用來保存title和對應的url

public class TitleBean {
    private String title;
    private String url;


    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

接下來就是把剛纔的思路轉換成代碼:

   private class GetDataThd extends Thread {
        @Override
        public void run() {
            super.run();
            try {
                Document doc = Jsoup.connect(BLOG_URL).get();//通過url獲取到網頁內容

                Elements elements = doc.getElementsByClass("link_title");//查找所有class爲"link_title"的元素
                for (Element e : elements) {
                    Elements titles = e.getElementsByTag("a");//在每一個找到的元素中,查找<a>標籤
                    for (Element title : titles) {
                        //將找到的標籤數據封裝起來
                        TitleBean bean = new TitleBean();
                        bean.setTitle(title.text());//獲取標籤的內容,也就是文章標題
                        bean.setUrl("http://blog.csdn.net" + title.attr("href"));//獲取標籤屬性,也就是文章鏈接
                        list.add(bean);
                    }
                }
                msgHandler.sendEmptyMessage(MSG_LOAD_OK);//通知UI更新List
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

在Adapter中,設置點擊事件,跳轉到詳情頁面:

   @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.item_title_list, null);
            holder = new ViewHolder();
            holder.tvTitle = (TextView) convertView.findViewById(R.id.tv_item_title);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        TitleBean bean = mList.get(position);
        holder.tvTitle.setText(bean.getTitle());

        holder.tvTitle.setOnClickListener(new ItemClickListener(bean.getUrl()));


        return convertView;
    }

    private class ItemClickListener implements View.OnClickListener {
        private String url;

        public ItemClickListener(String url) {
            this.url = url;
        }

        @Override
        public void onClick(View v) {
            Intent toDetail = new Intent(mContext, DetailActivity.class);
            toDetail.putExtra("detailUrl", url);
            mContext.startActivity(toDetail);
        }
    }

接下來在詳情頁面,通過getIntent獲取到url,然後用webView加載這個url即可:

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);

        String url = getIntent().getStringExtra("detailUrl");
        WebView mWebView = (WebView) findViewById(R.id.web_detail);

        mWebView.getSettings().setLoadWithOverviewMode(true);
        mWebView.getSettings().setUseWideViewPort(true);

        mWebView.loadUrl(url);
    }

運行效果:
這裏寫圖片描述

到此,通過解析網頁得到指定數據的小例子就完成了,思路還是比較簡單的。當然,多虧了第三方庫jsoup,才能夠簡單方便的抓取網頁的指定內容。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章