Node.js를 사용하여 서버 측에서 jQuery 선택기 / DOM 조작을 사용할 수 있습니까?
답변
업데이트 (27-Jun-18) : jsdom
원래 답변이 더 이상 작동하지 않는 주요 업데이트가있는 것 같습니다 . 지금 사용하는 방법을 설명하는 이 답변을 찾았습니다 jsdom
. 아래 관련 코드를 복사했습니다.
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
참고 : 원래 답변은 jsdom을 설치하고 사용해야한다고 언급하지 못했습니다.npm install jsdom
업데이트 (2013 년 말) : 공식 jQuery 팀은 마침내 jquery
npm 에서 패키지 관리를 인수했습니다 .
npm install jquery
그때:
require("jsdom").env("", function (err, window) {
if (err) {
console.error(err);
return;
}
var $ = require("jquery")(window);
});
답변
예, nodeQuery 라는 라이브러리를 사용하여 할 수 있습니다.
var Express = require('express')
, dnode = require('dnode')
, nQuery = require('nodeQuery')
, express = Express.createServer();
var app = function ($) {
$.on('ready', function () {
// do some stuff to the dom in real-time
$('body').append('Hello World');
$('body').append('<input type="text" />');
$('input').live('click', function () {
console.log('input clicked');
// ...
});
});
};
nQuery
.use(app);
express
.use(nQuery.middleware)
.use(Express.static(__dirname + '/public'))
.listen(3000);
dnode(nQuery.middleware).listen(express);
답변
글을 쓰는 시점에 유지되는 Cheerio도 있습니다.
서버를 위해 특별히 설계된 핵심 jQuery를 빠르고 유연하며 간결하게 구현합니다.
답변
jsdom 을 사용 하면 이제 할 수 있습니다. 예제 디렉토리에서 jquery 예제를 살펴보십시오.
답변
Cheerio를 사용하는 간단한 크롤러
이것은 Node.js에서 간단한 크롤러를 만드는 공식입니다. 서버 측에서 DOM 조작을 수행하려는 주된 이유이며 아마도 여기에있는 이유 일 것입니다.
먼저 request
구문 분석 할 페이지를 다운로드하는 데 사용하십시오. 다운로드가 완료되면 cheerio
jQuery를 사용하는 것처럼 처리하고 DOM 조작을 시작하십시오.
작업 예 :
var
request = require('request'),
cheerio = require('cheerio');
function parse(url) {
request(url, function (error, response, body) {
var
$ = cheerio.load(body);
$('.question-summary .question-hyperlink').each(function () {
console.info($(this).text());
});
})
}
parse('http://stackoverflow.com/');
이 예제는 SO 홈 페이지에 표시된 모든 주요 질문을 콘솔에 인쇄합니다. 이것이 Node.js와 커뮤니티를 좋아하는 이유입니다. 그것보다 쉬울 수 없었습니다 🙂
종속성을 설치하십시오.
npm 설치 요청 cheerio
그리고 실행하십시오 (위의 스크립트가 파일에 있다고 가정 crawler.js
).
노드 crawler.js
부호화
일부 페이지는 특정 인코딩으로 영어가 아닌 내용을 포함하므로이 페이지를로 디코딩해야합니다 UTF-8
. 예를 들어, 브라질 포르투갈어 (또는 다른 라틴어 언어)의 페이지는 ISO-8859-1
( “latin1”) 로 인코딩 될 수 있습니다 . 디코딩이 필요한 request
경우 내용을 해석 iconv-lite
하지 말고 대신 작업을 수행 하도록 지시합니다.
작업 예 :
var
request = require('request'),
iconv = require('iconv-lite'),
cheerio = require('cheerio');
var
PAGE_ENCODING = 'utf-8'; // change to match page encoding
function parse(url) {
request({
url: url,
encoding: null // do not interpret content yet
}, function (error, response, body) {
var
$ = cheerio.load(iconv.decode(body, PAGE_ENCODING));
$('.question-summary .question-hyperlink').each(function () {
console.info($(this).text());
});
})
}
parse('http://stackoverflow.com/');
실행하기 전에 종속성을 설치하십시오.
npm 설치 요청 iconv-lite cheerio
그리고 마지막으로 :
노드 crawler.js
다음 링크
다음 단계는 링크를 따르는 것입니다. SO에 대한 각 주요 질문의 모든 포스터를 나열하고 싶다고 가정 해보십시오. 먼저 모든 주요 질문 (위의 예)을 나열한 다음 각 링크를 입력하여 각 질문의 페이지를 구문 분석하여 관련 사용자 목록을 가져와야합니다.
링크를 따라 가면 콜백 지옥 이 시작될 수 있습니다. 이를 피하려면 어떤 약속, 선물 등을 사용해야합니다. 나는 항상 툴 벨트에서 비동기 상태를 유지 합니다. 다음은 async를 사용하는 크롤러의 전체 예입니다.
var
url = require('url'),
request = require('request'),
async = require('async'),
cheerio = require('cheerio');
var
baseUrl = 'http://stackoverflow.com/';
// Gets a page and returns a callback with a $ object
function getPage(url, parseFn) {
request({
url: url
}, function (error, response, body) {
parseFn(cheerio.load(body))
});
}
getPage(baseUrl, function ($) {
var
questions;
// Get list of questions
questions = $('.question-summary .question-hyperlink').map(function () {
return {
title: $(this).text(),
url: url.resolve(baseUrl, $(this).attr('href'))
};
}).get().slice(0, 5); // limit to the top 5 questions
// For each question
async.map(questions, function (question, questionDone) {
getPage(question.url, function ($$) {
// Get list of users
question.users = $$('.post-signature .user-details a').map(function () {
return $$(this).text();
}).get();
questionDone(null, question);
});
}, function (err, questionsWithPosters) {
// This function is called by async when all questions have been parsed
questionsWithPosters.forEach(function (question) {
// Prints each question along with its user list
console.info(question.title);
question.users.forEach(function (user) {
console.info('\t%s', user);
});
});
});
});
실행하기 전에 :
npm 설치 요청 비동기 cheerio
테스트를 실행하십시오.
노드 crawler.js
샘플 출력 :
Is it possible to pause a Docker image build?
conradk
Thomasleveil
PHP Image Crop Issue
Elyor
Houston Molinar
Add two object in rails
user1670773
Makoto
max
Asymmetric encryption discrepancy - Android vs Java
Cookie Monster
Wand Maker
Objective-C: Adding 10 seconds to timer in SpriteKit
Christian K Rider
그리고 그것은 당신이 자신의 크롤러를 만들기 시작해야 할 기본입니다 🙂
사용 된 라이브러리
답변
2016 년에는 훨씬 쉬워졌습니다. 콘솔을 사용하여 jquery를 node.js에 설치하십시오.
npm install jquery
$
node.js 코드 의 변수에 바인딩하십시오 (예 : 익숙합니다).
var $ = require("jquery");
물건을 :
$.ajax({
url: 'gimme_json.php',
dataType: 'json',
method: 'GET',
data: { "now" : true }
});
node.js를 기반으로하므로 gulp에서도 작동합니다.
답변
나는 이것에 대한 대답이 이제 그렇다고 믿는다.
https://github.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);