使用NodeJS使用jQuery

2 年 ago

逸, 科

1 minute

由于最近微服务的兴起，许多提供RESTful WebAPI服务的网站可以通过WebAPI来交换信息。然而，依然存在一些只能通过服务器端渲染方式返回HTML来获取信息的网站。当我们只需要其中的一部分信息时，就需要解析HTML并抽取需要的部分。此时，jQuery是一个非常有用的工具，我们可以尝试在使用原生的JavaScript代码（Node.js）解析HTML时，是否可以使用jQuery来简化操作。

所需的软件包

使用jQuery

毋庸置疑，由于必要，需要通过npm进行安装并通过require引用。

npm install jquery

jsdom是一个基于JavaScript的库，用于在Node.js和浏览器环境中创建DOM对象模拟。

这是一个能够在Node.js中操作DOM的包。仅仅使用它就能够达到许多目的，但是这次我们想要使用jQuery的接口，所以也会一并安装。

npm install jsdom

代码示例

这段代码非常简单，但现在先确认它能够运行。

const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const dom = new JSDOM(`<html><body><div id="aaa">AAA<div></body></html>`);
const { document } = dom.window;
const jquery = require('jquery');
const $ = jquery(dom.window);

console.log($("#aaa"));
console.log($("#aaa").text());
console.log($("#aaa")[0].id);

jQuery { '0': HTMLDivElement {}, length: 1 }
AAA
aaa

因为我没有完全测试过jQuery的所有功能，所以可能会有一些功能无法正常工作，但只要选择器能用，就勉强可以对付！

补充：尝试使用TypeScript

既然有机会，我决定尝试一下TypeScript。

import fs from "fs";
import jq from "jquery";
import { JSDOM } from "jsdom";

fs.readFile("read.html", "utf-8", (err, data) => {
    const dom = new JSDOM(data);
    const $: JQueryStatic = <any>jq(dom.window);  //ここがポイント
    console.log($("div"));
});