我想扩展 markdown 中图片的语法,比如这样:
[1||#img .banner .bg-white loading=lazy 500x400](http://example.com/1.png)
转换为:
<img src="http://example.com/1.png" alt="1" id="img" class="banner bg-white" loading="lazy" width="500" height="400" />
要求宽高是必须的,id
,class
,属性是可选的,我的正则(只匹配中括号内的字符,也就是 alt
):
const regexp = /(.*)\|\|(#\S+\s)?((\.\S+\s)*)((\S+=\S+\s)*)(\d+(\.\d+)?)x(\d+(\.\d+)?)$/
但是现在我想让 500x400
宽高部分的语法也是可选的。这样的话该如何写这个正则呢?
个人感觉有两个难点:
- 空格,之前宽高的语法是必定存在的,所以每个部分的空格后置跟随即可;但现在宽高语法是可选的,如果再这样最后会多一个空格出来。
- 如果用了扩展语法
||
,那么id
,class
, 属性集和宽高四种扩展语法至少存在一种。
(可能不符合题主想要的答案)语法解析类的代码,从可靠性、可维护性的角度来说,都不建议你用正则解决问题。建议正则只匹配特定的内容,比如
500x400
,其它的逻辑,就用 JS 来实现。举个例子。比如题目中的需求,我建议这么做:
[ATTR](URL)
,得到大块的定义URL
应该不需要处理ATTR
,然后对每个部分用不同的正则来匹配和处理<img xxxx ./>