JavaScript正则表达式提取Markdown图片标签的方法

从Markdown源码提取图片标签的方法

尽管前端和后端都有现成的库可以将Markdown文本转换为HTML，只需几行代码即可完成，但在某些场景下，我们需要直接从原始Markdown文本中提取特定的标签以进行后续处理。虽然可以从转换后的HTML中获取，但本文重点介绍如何直接从Markdown源码中提取内容的方法。

单个图片标签的提取

首先分析Markdown文本中仅包含一个图片标签的情况。

const str = "asddsad![标题](url)asdasddasd"; //一段markdown文本，包含一个图片"![标题](url)"
let result = str.match(/!\[(.*?)\]\((.*?)\)/); //直接查找
console.log(result); 

以下是该场景的运行结果展示。

多个图片标签的提取与处理

接着探讨Markdown文本中包含多个图片标签的处理方式。

const str = "asghfj![标题1](url1)gfhasfr![标题2](url2)sadas";
const pattern = /!\[(.*?)\]\((.*?)\)/mg;
let matcher;

while ((matcher = pattern.exec(str)) !== null) {
  console.log(matcher);
}

这是多图匹配的运行结果。

每次匹配结果都包含对应的原文片段及其在字符串中的位置索引。如果需要执行替换操作，可以直接利用这些位置信息进行替换，具体参考下方的替换示例。

//最简单的替换
"123".replace('1','a'); //把1替换为a

以上就是关于使用JavaScript正则表达式匹配Markdown图片标签的详细介绍，更多相关JavaScript处理Markdown图片标签的内容，欢迎搜索本站历史文章或继续浏览后续教程，感谢大家的支持。