javascript - ¿Puedo usar jQuery con Node.js?

Question

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

Answer 1

Un simple rastreador utilizando Cheerio.

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

Primero, use la request para descargar la página a analizar. Cuando se complete la descarga, cheerio a cheerio y comience la manipulación de 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 aparecen en la página de inicio de SO. Por eso me encanta Node.js y su comunidad. No podría ser más fácil que eso :-)

Instalar dependencias:

npm instalar solicitud cheerio

Y ejecute (asumiendo que el script anterior está en el archivo crawler.js ):

nodo crawler.js

Codificación

Algunas páginas tendrán contenido que no está en inglés en una codificación determinada y deberá decodificarlo a UTF-8 . Por ejemplo, una página en portugués brasileño (o cualquier otro idioma de origen latino) probablemente se codificará en ISO-8859-1 (también conocido como "latin1"). Cuando se necesita descodificar, le digo a la request no interprete el contenido de ninguna manera y en su lugar use 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:

npm instalar solicitud iconv-lite cheerio

Y luego, finalmente:

nodo crawler.js

Siguiendo enlaces

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

Cuando comienzas a seguir enlaces, puede comenzar un infierno de devolución de llamada . Para evitar eso, debes usar algún tipo de promesas, futuros o lo que sea. Siempre mantengo async en mi cinturón de herramientas. Entonces, aquí hay un ejemplo completo de un rastreador que usa 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 instalar solicitud asincrónica

Ejecutar una prueba:

nodo crawler.js

Salida de muestra:

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 debe saber para comenzar a crear sus propios rastreadores :-)

Bibliotecas utilizadas

• request
• iconv-lite
• cheerio
• async

Answer 2

A partir de jsdom v10, la función .env () está en desuso. Lo hice como a continuación después de intentar muchas cosas para requerir 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);

Espero que esto le ayude a usted o a cualquiera que haya estado enfrentando este tipo de problemas.

Answer 3

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

Answer 4

El módulo https://github.com/tmpvar/jsdom es una gran herramienta. Pero si desea evaluar páginas enteras y hacer algunas cosas extrañas en el lado del servidor, sugiero ejecutarlas en su propio contexto:

vm.runInContext

Por lo tanto, cosas como require / CommonJS en el sitio no CommonJS el proceso de Node.

Puedes encontrar documentación here . ¡Aclamaciones!

Answer 5

El módulo jQuery se puede instalar usando:

npm install jquery

Ejemplo:

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

Referencias de jQuery en Node.js **:

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

Answer 6

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

npm install jquery

vincúlela a la variable $ (por ejemplo, estoy acostumbrado a ella) en su 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.

Answer 7

En el momento de escribir allí también se mantiene el Cheerio .

Implementación rápida, flexible y eficiente del núcleo jQuery diseñado específicamente para el servidor.

Answer 8

Mi código de trabajo es:

npm install jquery

y entonces:

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

o si la ventana está presente, entonces:

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

Answer 9

No que yo sepa. El DOM es una cuestión del lado del cliente (jQuery no analiza el HTML, sino el DOM).

Aquí hay algunos proyectos actuales de Node.js:

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

Y el djangode de djangode es bastante genial ...

Answer 10

No. Será un gran esfuerzo para portar un entorno de navegador a un nodo.

Otro enfoque, que estoy investigando actualmente para realizar pruebas unitarias, es crear la versión "simulada" de jQuery que proporciona devoluciones de llamada cada vez que se llama a un selector.

De esta manera usted podría probar sus complementos jQuery sin tener un DOM. Aún tendrá que realizar pruebas en navegadores reales para ver si su código funciona de manera salvaje, pero si descubre problemas específicos del navegador, también puede "burlarse" fácilmente de aquellos en sus pruebas unitarias.

Enviaré algo a github.com/felixge una vez que esté listo para mostrar.

Answer 11

Puedes usar Electron , permite browserjs híbridos y nodejs.

Antes, intenté usar canvas2d en nodejs, pero finalmente me rendí. No es compatible con el valor predeterminado de nodejs, y es demasiado difícil de instalarlo (muchas, muchas ... dependencias). Hasta que use Electron, puedo usar fácilmente todo mi código de browserjs anterior, incluso WebGL, y pasar el valor del resultado (por ejemplo, datos de la imagen base de resultado 64) al código de nodejs.

Answer 12

Sí, puedes usar una biblioteca que he creado 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 13

Tienes que obtener la ventana usando la nueva API JSDOM.

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

Answer 14

Una alternativa es usar Underscore.js . Debería proporcionar lo que podría haber deseado del lado del servidor desde JQuery.

Answer 15

Usando jsdom ahora puedes. Basta con mirar su ejemplo de jQuery en el directorio de ejemplos.

Answer 16

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 17

ADVERTENCIA

Esta solución, como lo menciona Golo Roden, no es correcta . Es solo una solución rápida para ayudar a las personas a tener su código jQuery real ejecutándose con una estructura de aplicación Node, pero no es la filosofía de Node porque jQuery todavía se está ejecutando en el lado del cliente en lugar de en el lado del servidor. Lo siento por dar una respuesta incorrecta.

También puedes renderizar Jade con nodo y poner tu código jQuery dentro. Aquí está el código del archivo de 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();
      });

Answer 18

Actualización (27-jun-18) : parece que hubo una actualización importante en jsdom que hace que la respuesta original deje de funcionar. Encontré this respuesta que explica cómo usar jsdom ahora. He copiado el código correspondiente 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 y usar npm install jsdom

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

npm install jquery

Entonces:

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