Javascript 爬虫开发实战：从 HTML 解析到 JSON 存库的完整避坑指南

引言：零点博客的踩坑复盘

大家好，我是零点博客的博主。最近在折腾一个基于 Javascript 的在线数据采集工具，目标是把第三方网页的列表页数据清洗后存入自己的 MySQL 数据库。期间踩了不少坑，特别是正则表达式匹配不精准和 JSON 数据格式化问题，今天把这个实战复盘整理出来，希望能帮到在 C#/PHP 后端开发或前端工具有关的朋友。

一、需求背景与核心思路

我们不想直接用 Python 写爬虫，想尝试用 JavaScript (Node.js 环境) 来实现，因为这样前端和后端能共用一套逻辑。核心逻辑如下：

使用 JS 获取目标网页的 HTML 源码。
利用 正则表达式 提取关键数据。
将提取的数据组装成 JSON 对象。
通过 接口开发 传递给后端，由后端执行 SQL 语句存入数据库。

二、 HTML 解析与正则表达式的实战

拿到 HTML 后，直接用字符串匹配显然太乱了。我选择直接匹配出所需的属性。比如我们要抓取博客文章的标题和链接：

const htmlContent = response.data;
// 简单粗暴的正则匹配，注意转义特殊字符
const titleRegex = /<h3 class="post-title">(.*?)<\/h3>/g;
const linkRegex = /href="(.*?)"/g;

let match;
while ((match = titleRegex.exec(htmlContent)) !== null) {
    const title = match[1].trim();
    // 找到对应的链接...
}

这里有个避坑指南：正则写死类名容易失效，如果是动态加载的数据，Node.js 爬虫可能抓不到，这点和 Python 的爬虫策略类似，需要做好内容类型判断。

三、 JSON 数据清洗与结构化

抓取到的数据往往是不规整的字符串，必须清洗。我写了一个简单的 JSON 格式化函数：

// 去除多余空格和转义符
const cleanJsonString = (str) => {
    return JSON.stringify(JSON.parse(str));
};

在 零点博客 的以往教程中提到过，前端处理 JSON 性能不错，但如果是千万级数据，还是建议直接交给后端处理。这里演示前端组装。

四、后端接口对接与 SQL 注入防护

前端处理好 JSON 后，我们通过 AJAX 发送给后端。这里必须强调SQL 注入防护。无论你用的是 C# 还是 PHP，千万不能用字符串拼接 SQL！

示例 (PHP 风格)：

// 错误示范：
// $sql = "INSERT INTO posts (title) VALUES ('".$data["title"]."')";

// 正确示范：使用预处理语句
$stmt = $pdo->prepare("INSERT INTO posts (title, created_at) VALUES (:title, NOW())");
$stmt->execute([':title' => $data['title']]);

同理，如果用 C# 开发后端接口，记得使用 Dapper 或 EF Core 的参数化查询。

五、总结与底层原理拆解

这个工具开发的核心在于 JS 的异步处理（控制并发请求，避免被封）和数据类型转换（HTML -> String -> JSON -> Object -> SQL）。作为开发者，我们要学会拆解底层，不要只知其然不知其所以然。

这套代码我已经打包放到了零点博客的源码区，大家可以去下载尝试，如果在对接 EMLOG 主题或其他 CMS 时有遇到问题，欢迎在评论区留言讨论。