请教一个JS正则问题？

Question

我想扩展 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, 属性集和宽高四种扩展语法至少存在一种。

Answer 1

（可能不符合题主想要的答案）语法解析类的代码，从可靠性、可维护性的角度来说，都不建议你用正则解决问题。建议正则只匹配特定的内容，比如 500x400，其它的逻辑，就用 JS 来实现。

举个例子。比如题目中的需求，我建议这么做：

1. 正则匹配 [ATTR](URL)，得到大块的定义
2. URL 应该不需要处理
3. 打散 ATTR，然后对每个部分用不同的正则来匹配和处理
4. 如果不符合要求，可以抛出错误，标记错误位置
5. 通过后，组合输出所有内容到 <img xxxx ./>