Node.jsを使用してサーバーサイドでjQueryセレクター/ DOM操作を使用することは可能ですか?
Node.jsを使用してサーバーサイドでjQueryセレクター/ DOM操作を使用することは可能ですか?
回答:
アップデート(18-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);
});
require("...").env is not a function
。
TypeError: require(...).env is not a function
はい、できます。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);
, express = Express.createServer();
そしてTypeError: Express.createServer is not a function
何かアイデア?
npm install --save express
コマンドプロンプトで試してください。
執筆時点では、維持されているCheerioもあります。
サーバー専用に設計されたコアjQueryの高速で柔軟な無駄のない実装。
:gt(1)
jsdomを使用して、できるようになりました。examplesディレクトリにあるjqueryの例をご覧ください。
これは、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の各上位の質問からすべてのポスターをリストしたいとします。最初にすべての上位の質問(上記の例)をリストしてから、各リンクを入力し、各質問のページを解析して、関係するユーザーのリストを取得する必要があります。
リンクをたどると、コールバック地獄が始まります。それを回避するには、何らかの約束、先物などを使用する必要があります。私はいつも私のツールベルトで非同期を保ちます。したがって、非同期を使用するクローラーの完全な例を次に示します。
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 install request async 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でも機能します。
var $ = require("jquery"); $.ajax // undefined
(現時点では反対投票)。
npm install jquery
最初にしたと確信していますか?
> console.log(require("jquery").toString());
私の工場の機能を提供します:function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }
私はjsdomと上記の解答を使用していた: stackoverflow.com/a/4129032/539490
これに対する答えは今はイエスだと思います。
https://github.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
npm install jquery --save
#note ALL LOWERCASE
npm install jsdom --save
const jsdom = require("jsdom");
const dom = new jsdom.JSDOM(`<!DOCTYPE html>`);
var $ = require("jquery")(dom.window);
$.getJSON('https://api.github.com/users/nhambayi',function(data) {
console.log(data);
});
jQueryモジュールは以下を使用してインストールできます。
npm install jquery
例:
var $ = require('jquery');
var http = require('http');
var options = {
host: 'jquery.com',
port: 80,
path: '/'
};
var html = '';
http.get(options, function(res) {
res.on('data', function(data) {
// collect the data chunks to the variable named "html"
html += data;
}).on('end', function() {
// the whole of webpage data has been collected. parsing time!
var title = $(html).find('title').text();
console.log(title);
});
});
Node.js **でのjQueryの参照:
新しいJSDOM APIを使用してウィンドウを取得する必要があります。
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
HTML5をサポートするには、.JSDOM()を.JSDOM( "<!DOCTYPE html>")にする必要がありますか?
警告
Golo Rodenが述べたこの解決策は正しくありません。Nodeアプリ構造を使用して実際のjQueryコードを実行できるようにするための簡単な修正ですが、jQueryがサーバー側ではなくクライアント側で実行されているため、ノードの哲学ではありません。間違って答えてすみません。
ノード付きのJadeをレンダリングし、jQueryコードを内部に配置することもできます。jadeファイルのコードは次のとおりです。
!!! 5
html(lang="en")
head
title Holamundo!
script(type='text/javascript', src='http://code.jquery.com/jquery-1.9.1.js')
body
h1#headTitle Hello, World
p#content This is an example of Jade.
script
$('#headTitle').click(function() {
$(this).hide();
});
$('#content').click(function() {
$(this).hide();
});
jsdom v10以降、.env()関数は非推奨になりました。jqueryを必要とする多くのことを試した後、私は以下のようにそれをしました:
var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
これがあなたやこの種の問題に直面している人を助けることを願っています。
TypeError: JSDOM is not a constructor
$.each
。私はこれらの行を含めて、以下のようにそれを行いました: $.each(errors, function (ind,error) { res.send(error.msg);console.log(error.msg); });
これが役立つことを願っています!!
まず最初にそれをインストールしてください
npm install jquery -S
インストール後、以下のように使用できます
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
私がここに書いた完全なチュートリアルをチェックアウトできます:https : //medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7
はい、jQuery
で使用できますNode.js
。
ノードプロジェクトにjQueryを含める手順:-
npm i jquery --save
コードにjqueryを含める
import jQuery from 'jquery';
const $ = jQuery;
私はnode.jsプロジェクトでjqueryを使用していますが、特にChrome拡張機能のプロジェクトで使用しています。
例:https : //github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
いいえ。ブラウザ環境をノードに移植するのはかなり大変な作業になります。
私が現在ユニットテストのために調査している別のアプローチは、セレクターが呼び出されるたびにコールバックを提供するjQueryの「モック」バージョンを作成することです。
この方法では、実際にDOMがなくてもjQueryプラグインを単体テストできます。実際のブラウザーでテストして、コードが実際に機能するかどうかを確認する必要がありますが、ブラウザー固有の問題を発見した場合は、単体テストでも簡単に「模擬」できます。
表示する準備ができたら、github.com / felixgeに何かをプッシュします。
私が知っていることではありません。DOMはクライアント側のものです(jQueryはHTMLを解析しませんが、DOMを解析します)。
以下に、現在のNode.jsプロジェクトをいくつか示します。
https://github.com/ry/node/wiki(https://github.com/nodejs/node)
SimonWのdjangodeはすごくカッコいい...
別の方法は、Underscore.jsを使用することです。それはあなたがJQueryからサーバー側に望んでいたかもしれないものを提供するはずです。