Est-il possible d'utiliser des sélecteurs jQuery / manipulation DOM côté serveur en utilisant Node.js?

Mise à jour (27-juin-18) : Il semble qu'il y ait eu une mise à jour majeure jsdomqui empêche la réponse d'origine de fonctionner. J'ai trouvé cette réponse qui explique comment l'utiliser jsdommaintenant. J'ai copié le code correspondant ci-dessous.

var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

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

Remarque: La réponse d'origine ne mentionne pas que vous devrez également installer jsdom en utilisantnpm install jsdom

Mise à jour (fin 2013) : L'équipe officielle de jQuery a finalement repris la gestion du jquerypackage sur npm:

npm install jquery

Alors:

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

Oui, vous pouvez, en utilisant une bibliothèque que j'ai créée appelée 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);

Au moment de la rédaction, il y a aussi le Cheerio maintenu .

Implémentation rapide, flexible et allégée du noyau jQuery conçu spécifiquement pour le serveur.

Vous pouvez désormais utiliser jsdom . Regardez simplement leur exemple jquery dans le répertoire examples.

Un robot simple utilisant Cheerio

Voici ma formule pour créer un robot simple dans Node.js. C'est la principale raison de vouloir faire une manipulation DOM du côté serveur et c'est probablement la raison pour laquelle vous êtes arrivé ici.

Tout d'abord, utilisez requestpour télécharger la page à analyser. Une fois le téléchargement terminé, gérez-le cheerioet commencez la manipulation du DOM comme si vous utilisiez jQuery.

Exemple de travail:

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/');

Cet exemple imprimera à la console toutes les principales questions affichées sur la page d'accueil SO. C'est pourquoi j'aime Node.js et sa communauté. Rien de plus simple :-)

Installer les dépendances:

demande d'installation npm cheerio

Et exécutez (en supposant que le script ci-dessus est dans le fichier crawler.js):

node crawler.js

Codage

Certaines pages auront un contenu non anglais dans un certain encodage et vous devrez le décoder UTF-8. Par exemple, une page en portugais brésilien (ou toute autre langue d'origine latine) sera probablement codée ISO-8859-1(aka "latin1"). Lorsque le décodage est nécessaire, je dis de requestne pas interpréter le contenu de quelque manière que ce soit et de l'utiliser iconv-liteà la place pour faire le travail.

Exemple de travail:

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/');

Avant d'exécuter, installez les dépendances:

demande d'installation npm iconv-lite cheerio

Et puis finalement:

node crawler.js

Liens suivants

La prochaine étape serait de suivre les liens. Supposons que vous souhaitiez répertorier toutes les affiches de chaque question principale sur SO. Vous devez d'abord répertorier toutes les principales questions (exemple ci-dessus), puis entrer chaque lien, en analysant la page de chaque question pour obtenir la liste des utilisateurs impliqués.

Lorsque vous commencez à suivre des liens, un enfer de rappel peut commencer. Pour éviter cela, vous devez utiliser une sorte de promesses, de futurs ou autre. Je garde toujours asynchrone dans ma ceinture d'outils. Voici donc un exemple complet d'un robot utilisant 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);
            });
        });
    });
});

Avant de courir:

demande d'installation npm async cheerio

Exécutez un test:

node crawler.js

Exemple de sortie:

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

Et c'est la base que vous devez savoir pour commencer à créer vos propres robots :-)

Bibliothèques utilisées

• demande
• iconv-lite
• cheerio
• async

en 2016, les choses sont beaucoup plus faciles. installez jquery sur node.js avec votre console:

npm install jquery

le lier à la variable $(par exemple - je suis habitué) dans votre code node.js:

var $ = require("jquery");

faire des trucs:

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

fonctionne également pour gulp car il est basé sur node.js.

Je crois que la réponse à cette question est maintenant oui.
https://github.com/tmpvar/jsdom

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

npm install jquery --save #note TOUT EN MAJUSCULE

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

Le module jQuery peut être installé en utilisant:

npm install jquery

Exemple:

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

Références de jQuery dans Node.js **:

• http://quaintous.com/2015/07/31/jqery-node-mystery/
• http://www.hacksparrow.com/jquery-with-node-js.html

Vous devez obtenir la fenêtre en utilisant la nouvelle API JSDOM.

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

ATTENTION

Cette solution, comme l'a mentionné Golo Roden, n'est pas correcte . C'est juste une solution rapide pour aider les gens à faire fonctionner leur code jQuery réel à l'aide d'une structure d'application Node, mais ce n'est pas la philosophie Node car le jQuery fonctionne toujours côté client plutôt que côté serveur. Je suis désolé d'avoir donné une mauvaise réponse.

Vous pouvez également rendre Jade avec un nœud et y mettre votre code jQuery. Voici le code du fichier 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();
      });

Mon code de travail est:

npm install jquery

et alors:

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

ou si la fenêtre est présente, alors:

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

Le module jsdom est un excellent outil. Mais si vous voulez évaluer des pages entières et faire des trucs géniaux côté serveur, je vous suggère de les exécuter dans leur propre contexte:

vm.runInContext

Ainsi, des choses comme require/ CommonJSon site ne feront pas exploser votre processus Node lui-même.

Vous pouvez trouver la documentation ici . À votre santé!

Depuis jsdom v10, la fonction .env () est obsolète. Je l'ai fait comme ci-dessous après avoir essayé beaucoup de choses pour exiger 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);

J'espère que cela vous aidera, vous ou toute personne confrontée à ce type de problèmes.

Tout d'abord l'installer

npm install jquery -S

Après l'avoir installé, vous pouvez l'utiliser comme ci-dessous

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

Vous pouvez consulter un tutoriel complet que j'ai écrit ici: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7

Aucune de ces solutions ne m'a aidé dans mon application Electron.

Ma solution (solution de contournement):

npm install jquery

Dans votre index.jsdossier:

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

Dans vos .jsfichiers, écrivez vos fonctions jQuery de cette façon:

jQuery(document).ready(function() {

Oui, jQuerypeut être utilisé avec Node.js.

Étapes pour inclure jQuery dans le projet de noeud: -

npm i jquery --save Inclure jquery dans les codes

import jQuery from 'jquery';

const $ = jQuery;

J'utilise jquery dans les projets node.js tout le temps spécifiquement dans le projet de l'extension chrome.

par exemple https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js

Non. Ce sera un gros effort de porter un environnement de navigateur sur un nœud.

Une autre approche, que j'étudie actuellement pour les tests unitaires, consiste à créer une version "fictive" de jQuery qui fournit des rappels chaque fois qu'un sélecteur est appelé.

De cette façon, vous pouvez tester vos plugins jQuery sans avoir de DOM. Vous devrez toujours tester dans de vrais navigateurs pour voir si votre code fonctionne à l'état sauvage, mais si vous découvrez des problèmes spécifiques au navigateur, vous pouvez facilement "simuler" ceux de vos tests unitaires.

Je pousserai quelque chose sur github.com/felixge une fois qu'il sera prêt à être diffusé.

Vous pouvez utiliser Electron , il autorise les browserjs hybrides et les nodejs.

Avant, j'essayais d'utiliser canvas2d dans nodejs, mais finalement j'ai abandonné. Il n'est pas pris en charge par nodejs par défaut, et trop difficile à installer (beaucoup de ... dépendances). Jusqu'à ce que j'utilise Electron, je peux facilement utiliser tout mon code de navigateur précédent, même WebGL, et transmettre la valeur du résultat (par exemple, les données d'image de base64 du résultat) au code nodejs.

Pas que je sache de. Le DOM est une chose côté client (jQuery n'analyse pas le HTML, mais le DOM).

Voici quelques projets Node.js en cours:

https://github.com/ry/node/wiki ( https://github.com/nodejs/node )

Et le djangode de SimonW est sacrément cool ...

Une alternative consiste à utiliser Underscore.js . Il devrait fournir ce que vous auriez pu vouloir côté serveur de JQuery.