Android中利用Jsoup讓WebView清除Html標籤並讓圖片適應大小並居中

       在App應用中，咱們經常會加載一些新聞、通知等內容，這些內容不少來自於數據庫中存儲的HTML文本，裏面的標籤雜亂不堪，且內容中又包括圖片等。

       處理這些內容，咱們能夠利用正則表達式來處理，但標籤太多，太雜，又想保留換行等格式，正則表達式寫起來麻煩，我是個懶人，因而有了更簡便的方法，就是利用Jsoup來處理。示例HTML代碼以下：

  <p style="\&quot;font-family:" simsun;="" font-size:="" 14px;\"="">&nbsp; &nbsp;記者從貴陽市旅遊產業發展委獲悉，國慶黃金週臨近，爽爽貴陽一片秋意濃。即日起，市內各大景區景點紛紛推出各種特點國慶、中秋主題節慶活動，給市民遊客帶來一個豐盛的節日盛宴。</p>
  <p align="\&quot;center\&quot;" style="\&quot;font-family:" simsun;="" font-size:="" 14px;="" text-align:="" center;\"=""><img id="\&quot;6276046\&quot;" title="\&quot;\&quot;" border="\&quot;0\&quot;" src="\&quot;http://www.gywb.cn/xinwen/attachement/jpg/site2/20170927/3417eb9bc7b41b35c33901.jpg\&quot;" sourcedescription="\&quot;編輯提供的本地文件\&quot;" sourcename="\&quot;本地文件\&quot;" data-bd-imgshare-binded="\&quot;1\&quot;" style="\&quot;max-width:" 100%;="" height:="" 500px;="" width:="" 400px;\"="" /></p>
  <p align="\&quot;center\&quot;" style="\&quot;font-family:" simsun;="" font-size:="" 14px;="" text-align:="" center;\"="">&nbsp;&nbsp;&nbsp;&nbsp;圖爲20萬盆菊花扮靚花畫小鎮，與市民遊客一塊兒迎國慶</p>
  <p style="\&quot;font-family:" simsun;="" font-size:="" 14px;\"="">&nbsp; &nbsp;長假期間，國家5A級旅遊景區青巖古鎮將開展豐富多彩的民族文藝演出，演出內容包括滾山珠、錦雞舞等貴州非遺文化品牌節目。在狀元街，知名專家將現場傳授植物扎染及香囊製做工藝體驗。同時，貴州飯店國際會議中心將開通「青巖古鎮旅遊直通車」，天天發車，貴州飯店至青巖古鎮28元/人/趟、大學城至青巖古鎮10元/人/趟。</p>
  <p align="\&quot;center\&quot;" style="\&quot;font-family:" simsun;="" font-size:="" 14px;\"=""><img id="\&quot;6276048\&quot;" title="\&quot;\&quot;" border="\&quot;0\&quot;" src="\&quot;http://www.gywb.cn/xinwen/attachement/jpg/site2/20170927/3417eb9bc7b41b35c34502.jpg\&quot;" sourcedescription="\&quot;編輯提供的本地文件\&quot;" sourcename="\&quot;本地文件\&quot;" data-bd-imgshare-binded="\&quot;1\&quot;" style="\&quot;max-width:" 100%;="" height:="" 350px;="" width:="" 500px;\"="" /></p>
  <p align="\&quot;center\&quot;" style="\&quot;font-family:" simsun;="" font-size:="" 14px;="" text-align:="" center;\"="">&nbsp;圖爲20萬盆菊花扮靚花畫小鎮，與市民遊客一塊兒迎國慶</p>
  <p style="\&quot;font-family:" simsun;="" font-size:="" 14px;\"="">&nbsp; &nbsp;秋高氣爽看10月，在烏當區花畫小鎮，20萬盆菊花上山，穿上盛裝迎接國慶中秋「雙節」。這次花展將從10月1日持續至11月30日，共兩個月。遊客不只可在園區「廊橋」欣賞菊花種類、食用藥用價值和有關菊花的文學做品等知識展板，還可在菊展的三個展銷區域，免費領取菊花茶一袋，每日限量300份。此外，還有優秀國畫及書法做品，讓遊客近距離感覺中國文化的博大精深；在菊花詩詞朗誦區域，園區將爲遊客提供一個文化展現與才藝交流的平臺。</p>
  <p align="\&quot;center\&quot;" style="\&quot;font-family:" simsun;="" font-size:="" 14px;="" text-align:="" center;\"=""><img id="\&quot;6276052\&quot;" title="\&quot;\&quot;" border="\&quot;0\&quot;" src="\&quot;http://www.gywb.cn/xinwen/attachement/jpg/site2/20170927/3417eb9bc7b41b35c35804.jpg\&quot;" sourcedescription="\&quot;編輯提供的本地文件\&quot;" sourcename="\&quot;本地文件\&quot;" data-bd-imgshare-binded="\&quot;1\&quot;" style="\&quot;max-width:" 100%;="" height:="" 350px;="" width:="" 400px;\"="" /></p>
  <p align="\&quot;center\&quot;" style="\&quot;font-family:" simsun;="" font-size:="" 14px;="" text-align:="" center;\"="">&nbsp;圖爲20萬盆菊花扮靚花畫小鎮，與市民遊客一塊兒迎國慶</p>
  <p style="\&quot;font-family:" simsun;="" font-size:="" 14px;\"="">&nbsp; &nbsp;雙節期間，修文縣將舉辦「野生動物園現場特惠+農業嘉年華現場特惠」、「漂流（上半程）+朵芳閣桃源河酒店」等活動，凡10月1日-7日期間遊玩野生動物園的遊客，用手機與動物園小動物自拍合影，以及赴農業嘉年華進行參觀的遊客，用手機在現場自拍，經工做人員驗證後，桃源河漂流上半段票價可享受學生票價80元/人優惠。此外，中秋節10月4日當天，遊客還可在朵芳閣參與免費領月餅、猜燈謎等活動。</p>
  <p align="\&quot;center\&quot;" style="\&quot;font-family:" simsun;="" font-size:="" 14px;="" text-align:="" center;\"=""><img id="\&quot;6276054\&quot;" title="\&quot;\&quot;" border="\&quot;0\&quot;" align="\&quot;center\&quot;" src="\&quot;http://www.gywb.cn/xinwen/attachement/jpg/site2/20170927/3417eb9bc7b41b35c36305.jpg\&quot;" sourcedescription="\&quot;編輯提供的本地文件\&quot;" sourcename="\&quot;本地文件\&quot;" data-bd-imgshare-binded="\&quot;1\&quot;" style="\&quot;max-width:" 100%;="" height:="" 350px;="" width:="" 500px;\"="" /></p>
  <p align="\&quot;center\&quot;" style="\&quot;font-family:" simsun;="" font-size:="" 14px;="" text-align:="" center;\"="">&nbsp;圖爲20萬盆菊花扮靚花畫小鎮，與市民遊客一塊兒迎國慶</p>
  <p style="\&quot;font-family:" simsun;="" font-size:="" 14px;\"="">&nbsp; &nbsp;貴陽市旅遊產業發展委舒適提醒廣大遊客，出行前作好計劃，提前瞭解景區的開放狀況和周邊交通、餐飲、天氣等。出遊的過程當中要注意安全，遵照景區的安全警示，遊客在身體不適的狀況下不要勉強進行旅遊活動。經過網絡等自由組團進行戶外探險等活動時，要詳細瞭解組織者的身份、資質，目的地的氣候、團友的組成結構等信息，事先作好充分的準備。此外，遊客還應遵照法律規定，作到文明出行。</p>

 

       下面，咱們就來一步步處理這些內容並顯示

 

       一、要在App的build.gradle引入Jsoup

    implementation 'org.jsoup:jsoup:1.11.3'

       二、設置WebView屬性

     WebSettings webSettings = webView.getSettings();//獲取WebView的設置屬性
     webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//把html中的內容放大到WebView等寬的一列中
     webSettings.setJavaScriptEnabled(true);//讓WebView支持js
     webSettings.setSupportZoom(true); // 能夠縮放
     webSettings.setBuiltInZoomControls(true); // 顯示放大縮小(這個不設置則縮放不起做用)
     webSettings.setDisplayZoomControls(false);//不顯示webview縮放按鈕（經過這個設置則能夠不顯示那個縮放工具條）

       三、添加一段css樣式以讓WebView按新的樣式顯示，在這段樣式中設定了字體大小，圖片大小以及水平居中

　　　　private static final String cssStart = "<html>" + "\n"+
      　　　　　　　　　　　　        　　　　　　  "<header>" + "\n"+
            　　　　　　　　　　　　　　　　　　    "<style type=\"text/css\"> img {" +
            　　　　　　　　　　　　　　　　　　    "width:90%;" +
            　　　　　　　　　　　　　　　　　　    "height:auto;" +
            　　　　　　　　　　　　　　　　　　    "display:block;" +
             　　　　　　　　　　　　　　　　　　   "clear:both;" +
             　　　　　　　　　　　　　　　　　　   "margin:auto" +
             　　　　　　　　　　　　　　　　　　   "}" + "\n" +
               　　　　　　　　　　　　　　　　　　 "body {" +
               　　　　　　　　　　　　　　　　　　 "margin-right:15px;" +
              　　　　　　　　　　　　　　　　　　  "margin-left:15px;" +
              　　　　　　　　　　　　　　　　　　  "margin-top:15px;" +
               　　　　　　　　　　　　　　　　　　 "font-size:21px;" +
              　　　　　　　　　　　　　　　　　　  "}" + "\n" +
              　　　　　　　　　　　　　　　　　　  "</style>" + "\n" +
              　　　　　　　　　　　　　　　　　　  "</header>" + "\n" +
              　　　　　　　　　　　　　　　　　　  "<body>" +"\n";

　　　　private static final String cssEnd = "\n"+"</body>"+"\n"+"</html>";

       四、寫一個簡單的處理函數來清理HTML內容並保留換行格式以及添加新的css樣式

　　　　public static String getNewHtml(String htmlText){
　　　　　　try {
　　　　　　　　htmlText =

　　　　　　　　htmltext = Jsoup.clean(htmltext,Whitelist.basicWithImages());

　　　　　　　　htmltext = cssStart+htmltext+cssEnd;
　　　　　　　　return htmltext; 　　　　　　
　　　　　　} catch (Exception e) { 　　　　　　　　
　　　　　　　　return htmltext; 　　　　　　
　　　　　　} 　　　　
　　　　}

       五、經過上述處理後，咱們就能夠直接用WebView來處理了

　　　　webView.loadData(getNewHtml(htmlText), "text/html; charset=UTF-8", null);

　　顯示效果以下圖：

　　經過一系列的處理，咱們已經將不一樣格式的HTML以及HTML中不一樣大小的圖片按照統一的標準來展現，同時保留了原來的換行格式。

　　注：Jsoup clena的參數說明

　　WhiteList中有幾個參數選項

　　一、none()  

　　只保留文本，其餘全部的html內容均被刪除

　　二、basic() 

　　容許的標籤包括： a, b, blockquote, br, cite, code, dd, dl, dt, em, i, li, ol, p, pre, q, small, strike, strong, sub, sup, u, ul,以及合適的屬性。標籤a指向的鏈接能夠是 http, https, ftp, mailto，轉換完後會強制添加 rel=nofollow這個屬性。不容許包含圖片。

　　三、basicWithImages()

　　在basic的基礎上增長了圖片的標籤：img以及使用src指向http或https類型的圖片連接。

　　四、simpleText()

　　只容許: b, em, i, strong, u

　　五、relaxed() 

　　容許的標籤: a, b, blockquote, br, caption, cite, code, col, colgroup, dd, dl, dt, em, h1, h2, h3, h4, h5, h6, i, img, li, ol, p, pre, q, small, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, u, ul。結果不包含標籤rel=nofollow ，若是須要能夠手動添加。

　　若是隻想保留文本及換行，則clean的代碼換成以下：

　　　　String htmlText=Jsoup.clean(html, "", Whitelist.none(), new Document.OutputSettings().prettyPrint(false));

　　其中白名單根據本身的需求進行變動。