¿Es posible usar selectores jQuery / manipulación DOM en el lado del servidor usando Node.js?
¿Es posible usar selectores jQuery / manipulación DOM en el lado del servidor usando Node.js?
Respuestas:
Actualización (27-jun-18) : Parece que hubo una actualización importante jsdom
que hace que la respuesta original ya no funcione. Encontré esta respuesta que explica cómo usar jsdom
ahora. Copié 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 también necesitará instalar jsdom usandonpm install jsdom
Actualización (finales de 2013) : el equipo oficial de jQuery finalmente se hizo cargo de la administración del jquery
paquete en npm:
npm install jquery
Entonces:
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
Sí, puedes, usando una biblioteca que creé llamada 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();
y TypeError: Express.createServer is not a function
alguna idea?
npm install --save express
en su símbolo del sistema.
Al momento de escribir también existe el Cheerio mantenido .
Implementación rápida, flexible y eficiente de Core jQuery diseñado específicamente para el servidor.
:gt(1)
Usando jsdom ahora puedes. Simplemente mire su ejemplo de jquery en el directorio de ejemplos.
Esta es mi fórmula para hacer un rastreador simple en Node.js. Es la razón principal para querer hacer la manipulación DOM en el lado del servidor y probablemente es la razón por la que llegó aquí.
Primero, use request
para descargar la página a analizar. Cuando se complete la descarga, manipúlela cheerio
y comience a manipular 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 a Node.js y su comunidad. No podría ser más fácil que eso :-)
Instalar dependencias:
solicitud de instalación de npm cheerio
Y ejecute (suponiendo que el script anterior esté en el archivo crawler.js
):
nodo crawler.js
Algunas páginas tendrán contenido que no esté en inglés en una determinada codificación y deberá decodificarlo 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 decodificación, le digo que request
no interprete el contenido de ninguna manera y en su lugar lo uso 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 de npm iconv-lite cheerio
Y luego finalmente:
nodo crawler.js
El siguiente paso sería seguir los enlaces. Digamos 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, 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, debe usar algún tipo de promesas, futuros o lo que sea. Siempre mantengo asíncrono en mi cinturón de herramientas. Entonces, aquí hay un ejemplo completo de un rastreador que usa asíncrono:
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 solicitud de instalación async cheerio
Ejecute 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 debes saber para comenzar a hacer tus propios rastreadores :-)
en 2016 las cosas son mucho más fáciles. instale jquery a node.js con su consola:
npm install jquery
vincúlelo a la variable $
(por ejemplo, estoy acostumbrado) 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 tragar, ya que se basa en node.js.
var $ = require("jquery"); $.ajax // undefined
(Votado por el momento).
npm install jquery
primero?
> console.log(require("jquery").toString());
me da la función de fábrica: function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }
tuve que usar la respuesta anterior con jsdom: stackoverflow.com/a/4129032/539490
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);
npm install jquery --save
#note TODAS LAS MINÚSCULAS
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);
});
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 **:
Debe obtener la ventana utilizando la nueva API JSDOM.
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
) debe ser .JSDOM ("<! DOCTYPE html>") para soporte HTML5?
ADVERTENCIA
Esta solución, como mencionó 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 usando una estructura de aplicación Node, pero no es una filosofía Node porque jQuery todavía se ejecuta en el lado del cliente en lugar del lado del servidor. Lo siento por dar una respuesta incorrecta.
También puede renderizar Jade con nodo y poner su código jQuery dentro. Aquí está el código del archivo 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();
});
El módulo jsdom es una gran herramienta. Pero si desea evaluar páginas enteras y hacer algunas cosas funky en el lado del servidor, sugiero ejecutarlas en su propio contexto:
vm.runInContext
Así que cosas como require
/ CommonJS
en el sitio no arruinarán su proceso de Nodo en sí.
Puede encontrar documentación aquí . ¡Salud!
A partir de jsdom v10, la función .env () está en desuso. Lo hice como a continuación después de probar 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 te ayude a ti o a cualquiera que haya enfrentado este tipo de problemas.
TypeError: JSDOM is not a constructor
$.each
. Solo incluí estas líneas y luego lo hice a continuación: ¡ $.each(errors, function (ind,error) { res.send(error.msg);console.log(error.msg); });
Espero que esto ayude!
Primero que nada, instálalo
npm install jquery -S
Después de instalarlo, puede usarlo de la siguiente manera
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
Puede consultar un tutorial completo que escribí aquí: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7
Ninguna de estas soluciones me ha ayudado en mi aplicación Electron.
Mi solución (solución alternativa):
npm install jquery
En tu index.js
archivo:
var jQuery = $ = require('jquery');
En sus .js
archivos, escriba las funciones de jQuery de esta manera:
jQuery(document).ready(function() {
Sí, jQuery
se puede usar con Node.js
.
Pasos para incluir jQuery en el proyecto de nodo: -
npm i jquery --save
Incluir jquery en códigos
import jQuery from 'jquery';
const $ = jQuery;
Yo uso jquery en proyectos node.js todo el tiempo específicamente en el proyecto de extensión de Chrome.
por ejemplo, https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
No. Será un gran esfuerzo portar un entorno de navegador al nodo.
Otro enfoque, que actualmente estoy investigando para pruebas unitarias, es crear una versión "simulada" de jQuery que proporcione devoluciones de llamada cada vez que se llame a un selector.
De esta manera, podría probar sus complementos jQuery sin tener un DOM. Todavía tendrá que probar en navegadores reales para ver si su código funciona en la naturaleza, pero si descubre problemas específicos del navegador, también puede "burlarse" de ellos en las pruebas de su unidad.
Enviaré algo a github.com/felixge una vez que esté listo para mostrar.
Puede usar Electron , permite navegadores híbridos y nodos.
Antes, traté de usar canvas2d en nodejs, pero finalmente me di por vencido. No es compatible con el valor predeterminado de nodejs, y es demasiado difícil de instalar (muchas, muchas ... dependencias). Hasta que use Electron, puedo usar fácilmente todo mi código de navegador anterior, incluso WebGL, y pasar el valor del resultado (por ejemplo, datos de imagen de resultado base64) al código de nodo.
No que yo sepa. El DOM es una cosa del lado del cliente (jQuery no analiza el HTML, sino el DOM).
Aquí hay algunos proyectos actuales de Node.js:
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
Y el djangode de SimonW es bastante genial ...
Una alternativa es usar Underscore.js . Debería proporcionar lo que podría haber deseado del lado del servidor de JQuery.