JavaScript 解析 Markdown 获取 所有图片节点

场景

需要对 Markdown 中所有 img src 进行服务端加签名。

思路

因为 Markdown 有语法，首先放弃正则的方案，搜一下是否有现有方案，

google javascript get all image in markdown 搜到 get-md-image 这个方案，本地试了一下，发现只取到了 Markdown 中第一个 image 节点。看了下源码实现，原来是基于 commonmark.js 实现，除了获取图片，作者还封装了一系列基于 commonmark.js 的库，并且这些库的 npm 下载量都很大。

再看下 commonmark.js，这个库是基于 markdown 标准的 JavaScript 实现，其中提供的 Parser 方法可以将 markdown string 解析为一棵节点树，节点数包含基础数据和一些方法，我们会用到 type、destination、walker() 来获取所有的图片节点，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const commonMark = require("commonmark")

const getAllImg = markdown => {
  if(!markdown) return
  let parsed = new commonMark.Parser().parse(markdown)
  let walker = parsed.walker()
  let event
  let srcList = []
  let nodeList = []
  while (event = walker.next()) {
    let node = event.node;
    if (
      node.type === "image" &&
      node.destination
    ) {
      nodeList.push(node)
    }
  }
  const srcList = nodeList.map(node => node.destination)
  const uniqueSrcList = [...new Set(srcList)]

  return {
    srcList,
    uniqueSrcList,
    nodeList
  };
}