把md文档中的图片地址换成相对地址

出生场景

个人文章以前都是用简书写的，然而简书的文章我复制到本身的博客上，图片就显示不出来。并且多篇文章，图就更多了，我不可能一张一张替换吧。而后朋友就说，那你写个脚本替换不就好了。而后就开始了。

举个例子

• 通常md图片都长这样的：

![抽奖转盘](http://upload-images.jianshu.io/upload_images/3453108-d3d4ecbe2309e96e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
复制代码

• 替换以后它长这样的：

![抽奖转盘](./1.jpg)
复制代码

实现步骤

1. 循环文件夹，找到文件夹里全部要替换图片的md文件。
2. 读取md文件内容。
3. 正则匹配图片路径。
4. 下载图片。
5. 保存图片到本地目录。
6. 替换成相对路径。

具体实现

• 循环文件夹，找到文件夹里全部要替换图片的md文件：

const postDirPath = path.resolve(__dirname, "./source/_posts");

function main() {
  const files = fs.readdirSync(postDirPath, {
    withFileTypes: true
  });

  files.forEach(file => {
    if (file.isFile()) replaceFile(file);
  });
}
复制代码

• 读取md文件内容。

const filePath = path.resolve(postDirPath, file.name);
const fileData = fs.readFileSync(filePath, "utf8");
复制代码

• 正则匹配图片路径。

const regex = /\!\[.*\]\((http.*)\)/;

if (!regex.exec(fileData)) return;
const url = regex.exec(fileData)[1];
复制代码

• 下载图片。

function download(url) {
  return new Promise((resolve, reject) => {
    const HTTP = url.includes("http://") ? http : https;
    HTTP.get(url, response => {
      let imgData = "";
      response.setEncoding("binary");

      // 有些http连接的图片 须要重定向到HTTPS
      if (response.statusCode == 301) download(response.headers.location);

      response.on("data", chunk => (imgData += chunk));
      response.on("end", () => {
        resolve(imgData);
      });
    }).on("error", err => reject(err));
  });
}
复制代码

• 保存图片到本地目录。由于一篇md文章里有不少张图片，因此简单粗暴点，图片名称依次为：1.jpg、2.jpg、3.jpg...

function saveImg(dirName, imgFileName, imgData) {
  const dirPath = path.resolve(postDirPath, dirName);
  if (!fs.existsSync(dirPath)) fs.mkdirSync(dirPath);
  fs.writeFileSync(`${dirPath}/${imgFileName}.jpg`, imgData, "binary");
}
复制代码

• 替换成相对路径

function replace(filePath, imgFileName, url) {
  const fileData = fs.readFileSync(filePath, "utf8");
  const newFile = fileData.replace(url, `./${imgFileName}.jpg`);
  fs.writeFileSync(filePath, newFile);
}
复制代码

最后：

详细代码请查看lingzi的github：github.com/lingziyb/re…