Pregunta ¿Puedo usar jQuery con Node.js?


¿Es posible usar los selectores de jQuery / manipulación de DOM en el lado del servidor usando Node.js?


510
2017-11-26 01:54


origen


Respuestas:


Actualización (27-jun-18): Parece que hubo una actualización importante para jsdom eso hace que la respuesta original ya no funcione. encontré esta respuesta que explica cómo usar jsdom ahora. He copiado el código relevante a continuación.

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

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

Nota: La respuesta original no menciona que necesitará instalar jsdom también usando npm install jsdom

Actualización (finales de 2013): El equipo jQuery oficial finalmente se hizo cargo de la gestión de la jquery paquete en npm:

npm install jquery

Entonces:

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


511
2017-11-08 23:11



Sí, puedes, usando una biblioteca que creé llamada 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);

52
2017-11-04 19:12



En el momento de escribir, también está el mantenimiento Cheerio.

Implementación rápida, flexible y ligera de core jQuery diseñada   específicamente para el servidor.


48
2017-11-29 08:54



Utilizando jsdom ahora puedes. Solo mira su ejemplo de jquery en el directorio de ejemplos.


36
2017-08-23 03:23



Un simple rastreador usando Cheerio

Esta es mi fórmula para hacer un rastreador simple en Node.js. Es la razón principal para querer hacer DOM de manipulación en el lado del servidor y, probablemente, es la razón por la que llegaste aquí.

Primer uso request para descargar la página que se analizará. Cuando la descarga esté completa, manipúlela para cheerio y comenzar la manipulación DOM al igual que con jQuery.

Ejemplo de trabajo:

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

Este ejemplo imprimirá en la consola todas las preguntas principales que se muestran en la página de inicio de SO. Es por eso que amo Node.js y su comunidad. No podría ser más fácil que eso :-)

Instalar dependencias:

npm install request cheerio

Y ejecutar (suponiendo que el script de arriba está en el archivo crawler.js)

nodo crawler.js


Codificación

Algunas páginas tendrán contenido no inglés en una determinada codificación y deberá decodificarlo para UTF-8. Por ejemplo, una página en portugués brasileño (o cualquier otro idioma de origen latino) probablemente estará codificada en ISO-8859-1 (a.k.a. "latin1"). Cuando se necesita decodificación, le digo request no interpretar el contenido de ninguna manera y en su lugar utilizar iconv-lite para hacer el trabajo.

Ejemplo de trabajo:

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

Antes de ejecutar, instale dependencias:

solicitud de instalación npm iconv-lite cheerio

Y luego finalmente:

nodo crawler.js


Siguiendo enlaces

El próximo paso sería seguir enlaces. Supongamos que desea enumerar todos los carteles de cada pregunta principal en SO. Primero debe enumerar todas las preguntas principales (ejemplo anterior) y luego ingresar cada enlace, analizar la página de cada pregunta para obtener la lista de usuarios involucrados.

Cuando empiezas a seguir enlaces, infierno de devolución de llamada Puede empezar. Para evitar eso, debes usar algún tipo de promesas, futuros o lo que sea. Siempre guardo asincrónico en mi toolbelt Entonces, aquí hay un ejemplo completo de un rastreador usando 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);
            });
        });
    });
});

Antes de correr:

npm instale la solicitud async cheerio

Ejecuta una prueba:

nodo crawler.js

Muestra de salida:

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

Y eso es lo básico que debes saber para comenzar a hacer tus propios rastreadores :-)


Bibliotecas utilizadas


27
2017-07-11 19:36



en 2016 las cosas son mucho más fáciles. instala jquery en node.js con tu consola:

npm install jquery

vincularlo a la variable $ (por ejemplo, estoy acostumbrado) en tu código node.js:

var $ = require("jquery");

hacer cosas:

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

también funciona para gulp ya que está basado en node.js.


18
2017-11-17 13:57



Creo que la respuesta a esto es ahora sí.
https://github.com/tmpvar/jsdom

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

16
2018-04-27 09:15