使用Node.js创建目录并提取HTML图片标签的替代方案

在Node.js服务器端没法直接用浏览器的document.getElementsByTagName这类DOM方法？别担心，有几个靠谱的替代方案，我平时处理这类批量提取HTML元素的需求时，常用下面这几种：

1. 使用Cheerio（最推荐，语法贴近jQuery） #

Cheerio是一个轻量级的Node.js库，专门用来解析HTML和XML，语法和jQuery几乎一模一样，上手成本极低，处理静态HTML非常高效。

步骤： #

首先安装Cheerio：

npm install cheerio

然后编写提取逻辑：

const fs = require('fs');
const cheerio = require('cheerio');

// 读取本地HTML文件内容
const htmlContent = fs.readFileSync('./target.html', 'utf8');

// 加载HTML到Cheerio，得到类似jQuery的$对象
const $ = cheerio.load(htmlContent);

// 遍历所有img标签，提取src属性
const imageUrls = [];
$('img').each((index, element) => {
  const src = $(element).attr('src');
  if (src) {
    imageUrls.push(src);
    console.log(`已找到图片链接：${src}`);
  }
});

// 接下来就可以基于imageUrls数组，用axios、request等库批量下载图片到指定文件夹了

这个方案的优势在于：语法熟悉、处理速度快、对复杂HTML结构的兼容性好，完全能覆盖你批量提取图片标签的需求。

2. 正则表达式（适合简单HTML场景） #

如果你的HTML结构非常简单（比如img标签的src属性都是用双引号包裹，没有嵌套或复杂结构），可以用正则表达式快速匹配，但不推荐用于复杂HTML——因为HTML的语法灵活性很高，正则很容易出现匹配遗漏或错误。

示例代码：

const fs = require('fs');

const htmlContent = fs.readFileSync('./target.html', 'utf8');

// 匹配img标签中双引号包裹的src属性（简单版本）
const imgRegex = /<img[^>]+src="([^"]+)"/gi;
let matchResult;
const imageUrls = [];

while ((matchResult = imgRegex.exec(htmlContent)) !== null) {
  imageUrls.push(matchResult[1]);
  console.log(`已找到图片链接：${matchResult[1]}`);
}

注意：如果src用单引号、无引号，或者HTML中有注释、嵌套标签，这个正则就会失效，所以只适合快速处理简单场景。

3. 使用JSDOM或原生DOMParser（模拟浏览器DOM环境） #

如果你想完全模拟浏览器的DOM操作体验，可以用JSDOM（一个在Node.js中模拟浏览器DOM的库），或者在Node.js 20.2.0及以上版本中使用原生的DOMParser。

用JSDOM的示例： #

首先安装JSDOM：

npm install jsdom

然后编写代码：

const fs = require('fs');
const { JSDOM } = require('jsdom');

const htmlContent = fs.readFileSync('./target.html', 'utf8');

// 创建一个模拟的浏览器DOM环境
const dom = new JSDOM(htmlContent);
const document = dom.window.document;

// 现在就可以用你熟悉的getElementsByTagName方法了
const imgElements = document.getElementsByTagName('img');
const imageUrls = [];

for (const img of imgElements) {
  const src = img.getAttribute('src');
  if (src) {
    imageUrls.push(src);
    console.log(`已找到图片链接：${src}`);
  }
}

原生DOMParser（Node.js 20.2.0+）： #

如果你用的是较新版本的Node.js，无需安装第三方库，直接使用全局的DOMParser：

const fs = require('fs');

const htmlContent = fs.readFileSync('./target.html', 'utf8');

const parser = new DOMParser();
const doc = parser.parseFromString(htmlContent, 'text/html');

const imgElements = doc.getElementsByTagName('img');
const imageUrls = [];

for (let i = 0; i < imgElements.length; i++) {
  const src = imgElements[i].getAttribute('src');
  if (src) {
    imageUrls.push(src);
    console.log(`已找到图片链接：${src}`);
  }
}

这个方案的优势是完全兼容浏览器的DOM API，但相比Cheerio会更重一些，适合需要完整DOM功能的场景。

内容的提问来源于stack exchange，提问作者night_programmer