nodejs環境下html的解析

nodejs環境下，對妹子圖網站的數據進行獲取/解析/并利用express對客戶端進行json數據的返回。
本文主要解決了：1.jquery解析請求過來的html如何實現的問題；2.nodejs環境下jquery重度使用者的替代函數庫的問題；3.nodejs下，如何發送ajax請求的問題（ajax請求，本身就是一個request請求）；4. 本文用實際的案例來介紹了如何使用cheerio進行dom操作。

使用者需要安裝npm模塊：cheerio
另外推薦使用npm模塊:nodemon，可以對nodejs的程序進行熱部署

微信小程序平臺的基本要求是：
1. 數據服務器必須要是https協議的service接口
2. 微信小程序不是html5，不支持dom解析和window操作
3. 測試版本可以用第三方的數據服務接口，正式版本不允許用第三方的接口（當然，這里說的是多個第三方數據接口）。

在APICLOUD平臺下，我們可以使用html5配合jquery等類庫來實現dom數據的解析，來解決數據源不是json格式的問題（html下利用jquery加載html5中的數據，回頭整理一下之前學習apicloud平臺api的時候，做的測試app），但是在微信小程序平臺下，解析html元素基本上是沒有辦法的。在本文撰寫之前，我在網上看到有說用underscore來代替jquery做dom解析的回答，我搞了半天，發現還是不是那么順手。

因此，本文提出的方案是為了解決兩個問題：
1. 利用自己的服務器，給自己的微信小程序提供第三方網站的html數據轉換服務，將第三方的html元素解析出自己需要的元素，在nodejs平臺下，利用request模塊來完成數據請求，利用cheerio模塊來完成html的解析。
2. 在nodejs平臺下，雖然有jquery模塊，但是用起來還是有很多問題的。網上有一貼被給個網站復制的帖子，給出的在nodejs環境下使用jquery的方法，經過我的實際測試，發現并不能順利的進行上手編寫代碼。

因此，本文的行文思路：1. 對數據源進行分析; 2. 對request進行簡單的介紹；3.對cheerio模塊的常用方法進行簡單的介紹；4. 編寫在nodejs下，利用express模塊來實現json數據的提供。

按照大多數程序的套路，對第三方數據源的操作多是爬蟲案例，那么本文的案例應該也是宅男福利了吧。本文的目標地址是：http://m.mmjpg.com.

本文的數據源是來自排行榜頁面。排行榜頁面長這樣，

滑動滾動條在對底部，我們可以發現有一個加載更多的按鈕，點擊加載更多之后，在瀏覽器的控制臺中，可以看到，瀏覽器發送了一個url為http://m.mmjpg.com/getmore.php?te=1 page=3的請求.

瀏覽器的控制臺顯示的網絡請求截圖如下圖所示：

我們可以用瀏覽器，打開上面這個鏈接（http://m.mmjpg.com/getmore.php?te=1 page=3），這是我在寫本文的時候，訪問這個鏈接時瀏覽器獲取到的實時數據(讀者在自己進行瀏覽器訪問時，可能獲取的數據和我的不一樣)。
下圖中，我對頁面源代碼中的數據進行了標注，包括一下內容：1. 標題;2.所有圖片的瀏覽地址；3.預覽圖的地址；4.發布時間；5.點贊次數

對上面我們訪問加載更多頁面時，獲取的page=3的列表的頁面中，點擊了下面這個鏈接http://m.mmjpg.com/mm/958，對應的標題是亮麗清純妹子冰露純天然的G杯巨乳美圖。

從上圖中，可以看到，每個http://m.mmjpg.com/mm/958/數組序號頁面都有一張圖片，且這張圖片的地址也很規范，為http://img.mmjpg.com/2017/958/1.jpg。那后面的事情就很簡單了，我們只需要知道當前圖片集一共有多少張，就可以根據規則來拼接出所有圖片的地址了。那這里，對詳情頁數據的獲取，我們只需要對第一個圖片的頁面進行數據的獲取就可以了。主要獲取的數據是第（1/N）張和class為content的p下面第一個img標簽的src就可以了。

那，上面對數據源的介紹，就是這么多，其他的數據源的分析都是這樣的一個思路。相信列位看官一定能夠得到自己想要獲取的數據。

request模塊讓http請求變的更加簡單。

var request = require( request request( http://www.google.com , function (error, response, body) { if (!error response.statusCode == 200) { console.log(body);})

var fs=require( fs var request=require( request request( http://n.sinaimg.cn/news/transform/20170211/F57R-fyamvns4810245.jpg ).pipe(fs.createWriteStream( doodle.png 

fs.createReadStream( file.json ).pipe(request.put( http://mysite.com/obj.json ))

request.get( http://google.com/img.png ).pipe(request.put( http://mysite.com/img.png ))

var r = request.post( http://service.com/upload )var form = r.form()form.append( my_field , my_value )form.append( my_buffer , new Buffer([1, 2, 3]))form.append( my_file , fs.createReadStream(path.join(dirname, doodle.png ))form.append( remote_file , request( http://google.com/doodle.png ))

request.get( http://some.server.com/ ).auth( username , password , false);

//User-Agent之類可以在options對象中設置。var options = { url: https://api.github.com/repos/mikeal/request , headers: { User-Agent : request };function callback(error, response, body) { if (!error response.statusCode == 200) { var info = JSON.parse(body); console.log(info.stargazers_count + Stars  console.log(info.forks_count + Forks request(options, callback);

cheerio為服務器特別定制的，快速、靈活、實施的jQuery核心實現.npm網址下對cheerio模塊的簡介：www.npmjs.com/package/cheerio

如果閱讀英文文獻有問題的話，nodejs中文社區下的關于cheerio的api的中文介紹：cnodejs.org/topic/5203a71844e76d216a727d2e

其實，如果在nodejs下，使用const cheerio = require( cheerio 這樣的方式加載cheerio模塊的話，將我們的html源字符串作為參數，利用cheerio的load函數進行加載的話，我們是可以完全按照在jquery環境下的編程思路，來實現對dom的解析的。

由于cheerio模塊實現了大部分的jquery的函數，因此，本文在這里不進行過多的介紹。

通過上面的分析，我們可以看到我們的數據源不是json，而是html，對jquery來說，html應該在發送ajax請求的時候，設置dataType為text。

主要流程（jquery）：
1. 利用ajax請求，傳入url和設置dataType
2. 利用$(data)將ajax得到的數據轉換成jquery對象。
3. 利用jquery的find和get方法，找到需要獲取的元素。
4. 利用jquery的attr和html方法，取得所需要的信息。
5. 將上述信息整合成json串或者之前對你的html進行dom操作，完成數據的加載。

主要流程（nodejs）：
1. 利用requets請求，傳入url和設置dataType
2. 利用cheerio.load(body)將request得到的數據轉換成cheerio對象。
3. 利用cheerio的find和get方法，找到需要獲取的元素。
4. 利用cheerio的attr和text方法，取得所需要的信息。
5. 將上述信息整合成json串，利用express的res.json將json響應給客戶端（小程序或者其他APP）。

var express = require( express var router = express.Router();var bodyParser = require( body-parser var http = require( http const cheerio = require( cheerio /* GET home page. */router.get( / , function (req, res, next) { res.render( index , {title: Express });/* GET 妹子圖列表 page. */router.get( /parser , function (req, res, next) {
 var json =new Array(); var url = `http://m.mmjpg.com/getmore.php?te=0 page=3`; var request = require( request  request(url, function (error, response, body) { if (!error response.statusCode == 200) { var $ = cheerio.load( body );//將響應的html轉換成cheerio對象 var $lis = $( li //便利列表頁的所有的li標簽，每個li標簽對應的是一條信息 var json = new Array();//需要返回的json數組 var index = 0; $lis.each(function () { var h2 = $(this).find( h2 //獲取h2標簽，方便獲取h2標簽里的a標簽 var a = $(h2).find( a //獲取a標簽，是為了得到href和標題 var img = $(this).find( img //獲取預覽圖 var info =$($($(this).find( .info )).find( span )).get(0);//獲取發布時間 var like = $(this).find( .like //獲取點贊次數 //生成json數組 json[index] = new Array({ title :$(a).text(), href :$(a).attr( href ), image :$(img).attr( data-img ), timer :$(info).text(), like :$(like).text()}); index++; }) //設置響應頭 res.header( contentType , application/json //返回json數據 res.json(json); * 從第(1/50)張這樣的字符串中提取50出來 * @param $str * @returns {string} */function getNumberFromString($str) { var start = $str.indexOf( / var end = $str.indexOf( ) return $str.substring(start+1,end);}/* GET 妹子圖所有圖片 page. */router.get( /details , function (req, res, next) { var json; var url = `http://m.mmjpg.com/mm/958`; var request = require( request  request(url, function (error, response, body) { if (!error response.statusCode == 200) { var $ = cheerio.load( body );//將響應的html轉換成cheerio對象 var json = new Array();//需要返回的json數組 var index = 0; var img = $($( .content ).find( a )).find( img //每一次操作之后得到的對象都用轉換成cheerio對象的 var imgSrc = $(img).attr( src //獲取第一張圖片的地址 var title = $(img).attr( alt //獲取圖片集的標題 var total =$($( .contentpage ).find( span ).get(1)).text();//獲取‘第(1/50)張’ total = getNumberFromString(total);//從例如`第(1/50)張`提取出50來 var imgPre = imgSrc.substring(0,imgSrc.lastIndexOf( / )+1);//獲取圖片的地址的前綴 var imgFix = imgSrc.substring(imgSrc.lastIndexOf( . ));//獲取圖片的格式后綴名 console.log(imgPre + /t + imgFix); //生成json數組 var images= new Array(); for(var i=1;i =total;i++) { images[i-1] =imgPre+i+imgFix; json = new Array({ title :title, images :images}); //設置響應頭 res.header( contentType , application/json //返回json數據 res.json(json);module.exports = router;

在瀏覽中，獲取列表頁的json，截圖如下：

詳情頁的json獲取，截圖如下：

上面的json經過格式檢驗，都是有效的。

//獲取妹子圖的列表function loadData() { url = http://m.mmjpg.com/getmore.php  $.ajax({ url: tmpurl, method: get , dataType: application/text , data:{ te：0, page:3 success: function (data) { if (data) { ret = ul + ret + /ul var lis = $(ret).find( li var one =  $(lis).each(function () { var a = $(this).find( h2 a var ahtml = $(a).html();//標題 var ahref = $(a).attr( href //鏈接 var info = $(this).find( .info var date = $($(info).find( span ).get(0)).html(); var like = $($(info).find( .like )).html(); var img = $(this).find( img ).get(0); var imgsrc = $(img).attr( data-img //接下來，決定如何對數據進行顯示咯。如dom操作，直接顯示。 } else { alert( 數據加載失敗，請重試 };//end of loadData//圖片詳情頁的獲取，就不再提供jquery版本的代碼了

本文主要解決了：1.jquery解析請求過來的html如何實現的問題；2.nodejs環境下jquery重度使用者的替代函數庫的問題；3.nodejs下，如何發送ajax請求的問題（ajax請求，本身就是一個request請求）；4. 本文用實際的案例來介紹了如何使用cheerio進行dom操作。

【相關推薦】

1. HTML免費視頻教程

2. html實現消息按鈕上的數量角標的實例詳解

3. html中怎么樣才能讓JSON數據顯示的方法介紹

4. 對HTTP Headers知識點的圖文說明

5. XHTML中的超鏈接標簽使用教程

以上就是教你怎么在nodejs下解析html的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。