将图像降价解析为图像的正则表达式 html javascript

Question

我正在使用这个表达式：https://regex101.com/r/kWhBYU/1/

Regex: !\[(.*?)\]\((.*?)\)
Substitution "<img alt='' src='' />"

要在 markdown 中替换此图片：

![image (2).png](https://dev.azure.com/image.png)

到 html

中的图像

"<img alt='image (2).png' src='https://dev.azure.com/image.png' />"

一切正常，但出现问题，然后降价图像名称更改为 "image%20(2).png"

从这个降价

![image (2).png](https://dev.azure.com/image%20(2).png)

我明白了html

"<img alt='image (2).png' src='https://dev.azure.com/image%20(2' />".png)

此问题是由正则表达式中的括号“(2)”引起的。是否有适用于这两种情况的正则表达式？

Answer 1

试试这个正则表达式：

//        (               )    (                  )
//    ! [ (any char except \]) ] ( any char except \) )
//    |    |
//   \ /  \ /   

       

/\!\[([^\]]+)\]\(([^\)]*))/

Answer 2

可以通过多种方式从您的示例数据中获取匹配项。

其中一个选项可能是使匹配更具体一些，匹配非空白字符，直到最后出现一个点，然后例如匹配 1+ 个单词字符或匹配 png 字面意思后跟右括号。

!\[(.*?)]\((https?:\/\/\S+\.\w+)\)

说明

!\[ 匹配 ![
(.*?) 捕获 组 1，尽可能匹配除换行符以外的任何字符
]\( 匹配 ](
( 捕获 组 2
- https?:\/\/ 匹配带有可选s的协议后接://
- \S+\.\w+ 匹配 1+ 个非空白字符，然后是最后一个点和 1+ 个单词字符
)\) 关闭第 1 组并匹配 )

Regex demo

将图像降价解析为图像的正则表达式 html javascript

Regex to parse image markdown to image html javascript

html

javascript

regex

markdown