使用JavaScript正则表达式解析markdown里的图片标签

本文涉及的产品
云解析 DNS,旗舰版 1个月
云解析DNS,个人版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 使用JavaScript正则表达式解析markdown里的图片标签

需求:开发一个JavaScript函数,输入为markdown格式语法的图片标签:


输出是三个返回值:


image31.png

31

https://upload-images.jianshu.io/upload_images/2085791-416440df76a7343c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240

下面是我写的JavaScript函数和测试代码:

<html>
<script>
var input = "![image31.png](https://upload-images.jianshu.io/upload_images/2085791-416440df76a7343c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)";
var IMAGE_PATTERN = /^!\[(.*)\]\((.*)\)$/;
var IMAGE_INDEX = /^image(\d+).*$/;
// var IMAGE_TAG = "[图片]";
function SortedImage(index, url){
  this.index = index;
  this.url = url;
}
function sortByIndex(v1,v2){
    if(v1.index < v2.index ){
      return -1;
    }
    else if(v1.index > v2.index ){
      return 1;
    }
    else return 0;
}
function run(input) {
  if (input.indexOf("https://upload-images.jianshu.io") < 0 ) {
    return;
  } 
  var result = IMAGE_PATTERN.exec(input);
  if( result.length != 3){
    return;
  }
  var imageIndex = IMAGE_INDEX.exec(result[1]);
  console.assert(imageIndex.length === 2);
  return {
    "fileIndex": imageIndex[1],
    "fileName": result[1],
    "fileURL": result[2],
  };
}
var result = run(input);
debugger;
</script>
</html>

image.png

相关文章
|
2天前
|
搜索推荐 网络架构 开发者
Next.js静态出口生成策略深度解析
【7月更文挑战第18天】Next.js凭借其强大的静态生成、静态出口生成以及服务器端渲染功能,为开发者提供了构建高性能、高SEO友好Web应用的强大工具。
|
9天前
|
JSON JavaScript 前端开发
DVWA JavaScript 通关解析
DVWA JavaScript 通关解析
|
17天前
|
JavaScript
js 解析lrc文件(歌词)
js 解析lrc文件(歌词)
16 1
|
22天前
|
JavaScript 前端开发 开发者
JavaScript中的const关键字解析
JavaScript中的const关键字解析
19 2
|
7天前
|
Unix Linux Shell
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
|
14天前
|
JavaScript
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
32 0
|
15天前
|
JavaScript 前端开发
js【深度解析】代码的执行顺序
js【深度解析】代码的执行顺序
18 0
|
15天前
|
JavaScript 数据安全/隐私保护
js 常用正则表达式【实用】
js 常用正则表达式【实用】
10 0
|
17天前
|
存储 JavaScript 前端开发
|
17天前
|
前端开发 开发者
深入解析Vite.js源码
【7月更文挑战第1天】Vite.js 深入解析:以其无bundle开发、动态ES模块加载提升开发效率;本地HTTP服务器配合WebSocket实现热更新;按需加载减少资源占用;预构建优化生产环境性能;基于Rollup的插件系统增强灵活性。Vite,一个创新且高效的前端构建工具。
22 0

推荐镜像

更多