使用Cheerio

Question

是否可以使用Node.js在服务器端使用jQuery选择器/ DOM操作？

Answer 1

更新（27-Jun-18）：看起来有jsdom的重大更新导致原始答案不再有效。我找到了this回答，解释了现在如何使用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);

注意：原始答案没有提及您需要使用npm install jsdom安装jsdom

更新（2013年末）：官方jQuery团队最终接管了npm上jquery包的管理：

npm install jquery

<击> 然后：

<击>

require("jsdom").env("", function (err, window) {
    if (err) {
        console.error(err);
        return;
    }
    var $ = require("jquery")(window);
});

<击>

Answer 2

是的，您可以使用我创建的名为nodeQuery https://github.com/tblobaum/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);

Answer 3

在撰写本文时，还保留了Cheerio。

设计核心jQuery的快速，灵活和精益实现专门针对服务器。

Answer 4

现在可以使用jsdom。只需看看examples目录中的jquery示例。

Answer 5

使用Cheerio

的简单抓取工具

这是我在Node.js中制作一个简单爬虫的公式。这是想要在服务器端进行DOM操作的主要原因，也许这就是你到这里的原因。

首先，使用request下载要解析的页面。下载完成后，将其处理为cheerio并开始进行DOM操作，就像使用jQuery一样。

工作示例：

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 install request cheerio

并运行（假设上面的脚本在文件crawler.js中）：

node crawler.js

编码

某些网页将以特定编码包含非英文内容，您需要将其解码为UTF-8。例如，巴西葡萄牙语（或拉丁语的任何其他语言）的页面可能会编码在ISO-8859-1（a.k.a。“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

最后：

node crawler.js

以下链接

下一步是关注链接。假设您要在SO上列出每个热门问题的所有海报。您必须先列出所有热门问题（例如上面的例子），然后输入每个链接，解析每个问题的页面以获取相关用户的列表。

当您开始关注链接时，可以开始callback hell。为了避免这种情况，你应该使用某种承诺，期货或其他什么。我总是将async保留在我的工具箱中。所以，这是一个使用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 install request async cheerio

运行测试：

node 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

这是开始制作自己的抓取工具时应该知道的基本知识： - ）

使用的库

Answer 6

2016年的事情变得更容易了。使用您的控制台将jquery安装到node.js：

npm install jquery

在node.js代码中将它绑定到变量$（例如 - 我习惯了）：

var $ = require("jquery");

做的事情：

$.ajax({
    url: 'gimme_json.php',
    dataType: 'json',
    method: 'GET',
    data: { "now" : true }
});

也适用于gulp，因为它基于node.js。

Answer 7

我相信现在的答案是肯定的 https://github.com/tmpvar/jsdom

var navigator = { userAgent: "node-js" };  
var jQuery = require("./node-jquery").jQueryInit(window, navigator);

Answer 8

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);
});

Answer 9

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的引用**：

Answer 10

您必须使用新的JSDOM API获取窗口。

const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);

Answer 11

我的工作代码是：

npm install jquery

然后：

global.jQuery   = require('jquery');
global.$        = global.jQuery;

或如果窗口存在，则：

typeof window !== "undefined" ? window : this;
window.jQuery   = require('jquery');
window.$        = window.jQuery;

Answer 12

警告

Golo Roden提到的此解决方案不是正确。它只是一个快速修复，帮助人们使用Node应用程序结构运行他们的实际jQuery代码，但它不是Node哲学，因为jQuery仍然在客户端而不是在服务器端运行。我很抱歉给出了错误的答案。

您还可以使用节点渲染Jade并将您的jQuery代码放入其中。这是玉文件的代码：

!!! 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(); });

Answer 13

首先安装

npm install jquery -S

安装后，您可以按以下方式使用它

import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();

您可以在此处查看完整的教程：https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7

Answer 14

模块jsdom是一个很棒的工具。但是如果你想评估整个页面并在服务器端做一些时髦的东西我建议在他们自己的上下文中运行它们：

vm.runInContext

因此，网站上require / CommonJS之类的内容不会破坏您的Node流程。

您可以找到文档here。干杯！

Answer 15

从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);

希望这可以帮助您或任何遇到过这类问题的人。

Answer 16

这些解决方案都没有对我的Electron App有所帮助。

我的解决方案（解决方法）：

npm install jquery

在您的index.js文件中：

var jQuery = $ = require('jquery');

通过以下方式在.js文件中编写您的jQuery函数：

jQuery(document).ready(function() {

Answer 17

是的，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

Answer 18

您可以使用Electron，它允许混合浏览器和节点。

之前，我尝试在nodejs中使用canvas2d，但最后我放弃了。 nodejs默认不支持它，并且很难安装它（许多...依赖）。在我使用Electron之前，我可以轻松使用我以前的所有browserjs代码，甚至是WebGL，并将结果值（例如结果base64图像数据）传递给nodejs代码。

Answer 19

没有。将浏览器环境移植到节点将会付出相当大的努力。

我正在研究单元测试的另一种方法是创建jQuery的“Mock”版本，只要调用选择器就会提供回调。

这样你就可以在不实际拥有DOM的情况下对你的jQuery插件进行单元测试。您仍然需要在真实的浏览器中进行测试，看看您的代码是否可以正常运行，但如果您发现浏览器特定的问题，您也可以轻松地“模拟”单元测试中的代码。

一旦它准备好显示，我会把东西推到github.com/felixge。

Answer 20

不是我知道的。 DOM是客户端的东西（jQuery不解析HTML，但是DOM）。

以下是一些当前的Node.js项目：

http://wiki.github.com/ry/node

SimonW的djangode真是太酷了......

Answer 21

另一种方法是使用Underscore.js。它应该从JQuery提供你可能想要的服务器端。

我可以在Node.js中使用jQuery吗？

21 个答案:

使用Cheerio

编码

以下链接

使用的库