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

简介: 使用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月前
|
移动开发 JavaScript 前端开发
JavaScript的正则表达式实现邮箱校验
JavaScript的正则表达式实现邮箱校验
56 1
|
2月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
|
2月前
|
JavaScript 前端开发
javascript中的正则表达式
javascript中的正则表达式
|
3月前
|
JavaScript 前端开发
JavaScript中的正则表达式构造函数和正则表达式字面量
JavaScript中的正则表达式构造函数和正则表达式字面量
|
8天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
8天前
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
2月前
|
存储 算法 编译器
【ffmpeg 到Qt的图片格式转换】精彩的像素:深入解析 AVFrame 到 QImage 的转换
【ffmpeg 到Qt的图片格式转换】精彩的像素:深入解析 AVFrame 到 QImage 的转换
49 0
|
2月前
|
监控 JavaScript 前端开发
JavaScript 正则表达式详解
【2月更文挑战第26天】
36 1
JavaScript 正则表达式详解
|
2月前
|
开发工具 数据安全/隐私保护 Android开发
视觉智能平台常见问题之图片解析出的水印图判断是自己添加的水印图如何解决
视觉智能平台是利用机器学习和图像处理技术,提供图像识别、视频分析等智能视觉服务的平台;本合集针对该平台在使用中遇到的常见问题进行了收集和解答,以帮助开发者和企业用户在整合和部署视觉智能解决方案时,能够更快地定位问题并找到有效的解决策略。
22 1
|
2月前
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
29 0

推荐镜像

更多