nodejs 환경에서 html 파싱
nodejs 환경에서 자매 사진 웹사이트의 데이터를 획득/파싱하고 express를 사용하여 클라이언트에 json을 보냅니다. 데이터.
이 기사는 주로 다음을 해결합니다. 1. 요청된 HTML을 jquery로 구문 분석하는 방법 2. nodejs 환경에서 jquery를 많이 사용하는 사용자를 위한 대체 함수 라이브러리 문제 3. Ajax 요청을 보내는 방법 nodejs 아래(ajax 요청, 그 자체가 요청 요청) 4. 이 글에서는 실제 사례를 사용하여 cheerio를 사용하여 DOM 작업을 수행하는 방법을 소개합니다.
사용자는 npm 모듈:cherio를 설치해야 합니다.
또한 npm 모듈을 사용하는 것이 좋습니다:nodemon, 이는 nodejs 프로그램을 핫 배포할 수 있습니다.
WeChat Mini 프로그램 플랫폼 기본 요구 사항은 다음과 같습니다.
1. 데이터 서버는 https 프로토콜의 서비스인터페이스여야 합니다
2. WeChat 애플릿은 html5가 아닙니다. DOM 구문 분석 및 창 작업을 지원하지 않습니다
3. 테스트 버전은 타사 데이터 서비스 인터페이스를 사용할 수 있지만 공식 버전은 타사 인터페이스 사용을 허용하지 않습니다(물론 여기서는 여러 타사에 대해 이야기합니다). 파티 데이터 인터페이스).
APICLOUD 플랫폼에서 jquery 및 기타 클래스 라이브러리와 함께 html5를 사용하여 dom 데이터 구문 분석을 실현하여 데이터 소스 문제를 해결할 수 있습니다. json 형식이 아닌(jquery를 사용하여 html 아래의 html5로 데이터를 로드하고, apicloud 플랫폼 api를 배울 때 만든 테스트 앱을 다시 정렬하여 정리), WeChat 미니 프로그램 플랫폼에서는 기본적으로 방법이 없습니다. html 요소 를 구문 분석합니다. 이 글을 쓰기 전에 인터넷에서 DOM 구문 분석에 jquery 대신 underscore을 사용하는 방법에 대한 답변을 보았습니다. 오랫동안 작업했는데 여전히 원활하지 않다는 것을 알았습니다.
따라서 이 글에서 제안하는 해결책은 두 가지 문제를 해결하는 것입니다:
1. 자체 서버를 사용하여 타사 웹사이트의 HTML 데이터 변환 서비스를 자체 WeChat 애플릿에 제공합니다. party HTML 요소는 필요한 요소를 구문 분석합니다. nodejs 플랫폼에서 request 모듈을 사용하여 데이터 요청을 완료하고 cheerio 모듈을 사용하여 html 구문 분석을 완료합니다.
2. nodejs 플랫폼 아래에는 jquery 모듈이 있지만 사용하는데 여전히 문제가 많습니다. 인터넷에 nodejs 환경에서 jquery를 사용하는 방법을 알려주는 글이 있는데, 실제 테스트를 해보니 코드 작성을 원활하게 시작할 수 없다는 것을 알게 되었습니다.
따라서 이 기사의 작성 아이디어는 다음과 같습니다. 1. 데이터 소스를 분석합니다. 2. request을 간략하게 소개합니다. 3. cheerio 모듈의 일반적인 방법을 간략하게 소개합니다. json 데이터를 제공하려면 express 모듈을 사용하세요.
대부분의 프로그램 루틴에 따르면 타사 데이터 소스에 대한 작업은 대부분 크롤러 사례이므로 이 기사에서는 그 사례를 설명합니다. 똑같아야 한다. 홈보이들에게는 축복이다. 이 글의 대상 주소는 http://m.mmjpg.com.
이 글의 자료 출처는 순위 페이지입니다. 순위 페이지는 다음과 같습니다. 
하단의 스크롤바를 밀면 더 보기 버튼을 찾을 수 있습니다, Load More를 클릭하면 브라우저 콘솔에서 브라우저가 url에 대한 요청을 http://m.mmjpg.com/getmore.php?te=1&page=3
브라우저를 사용하여 위 링크(
)를 열 수 있습니다. 이 링크는 제가 이 글을 작성할 때 액세스한 링크입니다. 그 당시 브라우저에서 얻은 시간 데이터(독자가 브라우저에 직접 액세스할 때 내 데이터와 다른 데이터를 얻을 수 있음) http://m.mmjpg.com/getmore.php?te=1&page=3아래 그림에서는 다음 내용을 포함하여 페이지 소스 코드에 데이터를 표시했습니다. 1. 제목 2. 모든
사진 검색 주소 4; .출시 시간 5. 좋아요 수 
위의 추가 페이지를 로드하기 위해 접속했을 때, page=3 목록의 페이지에서 다음 링크http://m.mmjpg.com/mm/958를 클릭했는데, 해당 제목은 亮丽清纯妹子冰露纯天然的G杯巨乳美图입니다. .
위 사진을 보면 http://m.mmjpg.com/mm/958/<a href="http://www.php.cn/wiki/58.html" target="_blank">数组</a>序号 페이지마다 이미지가 있는 것을 알 수 있는데, 이 이미지의 주소도 매우 표준화되어 있는데, 바로 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는 npm 공식 웹사이트에서 사용할 수 있습니다. 모듈 소개 : www.npmjs.com/package/cheerio
cnodejs.org/topic/5203a71844e76d216a727d2e
을 사용하여 nodejs에서 const cheerio = require('cheerio'); 모듈을 로드하는 경우 HTML 소스 cheerio 문자열 을 매개변수로 사용하고 의 cheerio을 사용합니다. 함수가 로드되면 load 환경에서 jquery프로그래밍 아이디어를 완전히 따라가서 DOM 구문 분석을 실현할 수 있습니다.
모듈은 cheerio의 기능을 대부분 구현하므로 여기서는 이에 대한 자세한 소개를 생략하겠습니다. jquery
이 아니라 json인 것을 알 수 있습니다. 🎜>는 html 요청을 보낼 때 jquery을 html으로 설정해야 합니다. ajaxdataType주요 프로세스(jquery): text1. ajax 요청을 사용하고 url을 전달하고 dataType을 설정합니다.
에서 얻은 데이터를
로 변환합니다. 물체.
3. $(data)의 ajax 및 jquery 메소드를 사용하여 획득에 필요한 요소를 찾습니다.
4. jquery의 find 및 get 메소드를 사용하여 필요한 정보를 얻습니다.
5. 위 정보를 json 문자열에 통합하거나 jquery에서 attr 작업을 수행하여 데이터 로드를 완료합니다. html
주요 프로세스(nodejs): html1. 요청을 사용하여 URL을 전달하고 데이터 유형을 설정합니다. dom2.
개체.
3.
의 cheerio.load(body) 및 request 메소드를 사용하여 획득에 필요한 요소를 찾습니다. cheerio4.
의 cheerio 및 find 메소드를 사용하여 필요한 정보를 얻습니다. get5. 위의 정보를 json 문자열로 통합하고
의 cheerio을 사용하여 클라이언트(미니 프로그램 또는 기타 APP)에 json을 응답합니다. attrtext코드로 직접 이동expressnodejs에서 이미지 목록 가져오기 및 구문 분석res.json
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은 형식이 확인되었습니다. 그리고 유효합니다.
//获取妹子图的列表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免费视频教程
위 내용은 nodejs에서 HTML을 구문 분석하는 방법을 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
