nodejs扒取html页面中所有链接资源

前言：

总有些人，想下载一个插件，能直接获取浏览器显示页面的所有资源。也就是下载一个其他人的网站，但是不想一个个复制链接的内容，原因大致有二：
1、链接多，打卡每个链接去下载十分繁琐
2、复制好了，还要重新改html中每个链接指向的新资源路径（下载好的路径）

分析：

1、js在浏览器上是不可能实现，本地生成文件的（下载资源），因为浏览器没有这个权限，那么就需要服务器配合
2、服务器如何知道html浏览器中，到底有哪些文件需要下载，服务器本身没有document对象，那么就返回来需要浏览器配合

结论：

靠浏览器获取所有需要下载的资源，把需要下载的资源通过ajax请求方式，告诉服务器，服务器去实现下载资源

项目文件夹结构

root根目录
   | static文件夹
        | file 文件夹（这个可以不创建，下载资源会生成这个文件夹）
        | jquery-1.8.3.js
   | app.js

代码展示

1、app.js（先执行这个js，cmd命令窗口输入： node app.js）

var express = require('express');
var fs = require('fs');
var bodyParser = require('body-parser');
var request = require('request ');
var path= require('path');

var app = express();
app.use(bodyParser.json());

app.use('/urlDownLoadFile', (req, res) => {
  var filePaths = req.body.filepaths,
      dirPath = req.body.dirPath;
  var fileDirPath = path.join(__dirname, './static/', dirPath);
  if (!fs.existsSync(fileDirPath)) {
    fs.mkdirSync(fileDirPath);
  }
  filePaths.forEach(item => {
    if (item !== '') {
      var lastIndex = item.lastIndexOf('/'),
          fileName = item.substr(lastIndex + 1);
      var stream = fs.createWriteStream(path.join(fileDirPath, fileName));
      request(item).pipe(stream).on('close', (err) => {
         if (err) {
          console.log(err);
         }
      });
    }
  });
  res.send('');
});

app.use('/', express.static('./static'));
app.listen(3000);

2、然后，F12打开要下载网页的控制台，把下面这段代码复制进去

var dirPath = 'file/', // 资源目录（下载到服务器 static/里面的 哪个文件夹）
    allUrls = [localhost.href]; // 所有要下载的路径

var scriptNode = document.createElement('script');
scriptNode.src = 'http://127.0.0.1:3000/jquery-1.8.3.js';
document.body.appendChild(scriptNode);
scriptNode.onload = () => {
  $('link').each((index, ele) => {
    allUrls.push(ele.href);
  });
  $('script').each((index, ele) => {
    allUrls.push(ele.src);
  });
  $('img').each((index, ele) => {
    allUrls.push(ele.src);
  });

  $.ajax({
    url: 'http://127.0.0.1:3000/urlDownLoadFile',
    dataType: 'jsonP',
    data: {
       filepaths: allUrls,
       dirPath: dirPath 
    }
  });
}

3、打开“file 文件夹”，里面已经有了所有网页的资源：html、js、css、jpg...

root根目录
   | static文件夹
        | file 文件夹（这个可以不创建，下载资源会生成这个文件夹）
        | jquery-1.8.3.js
   | app.js

4、打开html修改引用资源路径

<script src="../jquery-1.8.3.js"></script>
<script>
  $('link').each((index, ele) => {
    var filePath = ele.href,
        lastIndex = filePath.lastIndexOf('/'),
        fileName = filePath.substr(lastIndex + 1);
    ele.href = fileName;
  });
  $('script').each((index, ele) => {
    var filePath = ele.src,
        lastIndex = filePath.lastIndexOf('/'),
        fileName = filePath.substr(lastIndex + 1);
    ele.src= fileName;
  });
  $('img').each((index, ele) => {
    var filePath = ele.src,
        lastIndex = filePath.lastIndexOf('/'),
        fileName = filePath.substr(lastIndex + 1);
    ele.src= fileName;
  });
</script>

---------------------------下面作废--------------------

...
网上复制下来的html内容
...
<script>
var dirPath = 'file/', // 资源目录（下载到服务器 static/里面的 哪个文件夹）
    linkNodes = document.getElementsByTagName('link'), // 所有css node节点
    scriptNodes = document.getElementsByTagName('script'), // 所有js node节点
    linkUrls = [], // 所有css node节点和新路径
    scriptUrls = [],  // 所有js node节点和新路径
    allUrls = []; // 所有要下载的路径

for (var i=0; i < linkNodes.length; i++) {
  var filePath = linkNodes[i].href,
    lastIndex = filePath .lastIndexOf('/'),
    fileName = filePath .substr(lastIndex + 1);
  allUrls.push(filePath);
  linkUrls.push({
    node: linkNodes[i],
    url: dirPath + fileName
  });
}

for (var i=0; i < scriptNodes.length; i++) {
  var filePath = scriptNodes[i].src,
    lastIndex = filePath .lastIndexOf('/'),
    fileName = filePath .substr(lastIndex + 1);
  filePath === '' && continue;
  allUrls.push(filePath);
  scriptUrls.push({
    node: scriptNodes[i],
    url: dirPath + fileName
  });
}

var xhr = new XMLHttpRequest();
xhr.open('POST', '/urlDownLoadFile');
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.send(JSON.stringify({
  filepaths: allUrls,
  dirPath: dirPath 
}))
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
     linkUrls.forEach(item => {
        item.node.href = item.url;
     });
     scriptUrls.forEach(item => {
        item.node.src= item.url;
     });
  }
}
</script>
</body>
</html>