请教一个JS正则问题?

我想扩展 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" />

要求宽高是必须的,idclass,属性是可选的,我的正则(只匹配中括号内的字符,也就是 alt):

const regexp = /(.*)\|\|(#\S+\s)?((\.\S+\s)*)((\S+=\S+\s)*)(\d+(\.\d+)?)x(\d+(\.\d+)?)$/

但是现在我想让 500x400 宽高部分的语法也是可选的。这样的话该如何写这个正则呢?

个人感觉有两个难点:

  • 空格,之前宽高的语法是必定存在的,所以每个部分的空格后置跟随即可;但现在宽高语法是可选的,如果再这样最后会多一个空格出来。
  • 如果用了扩展语法 ||,那么 id, class, 属性集和宽高四种扩展语法至少存在一种
阅读 1.7k
1 个回答

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

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

  1. 正则匹配 [ATTR](URL),得到大块的定义
  2. URL 应该不需要处理
  3. 打散 ATTR,然后对每个部分用不同的正则来匹配和处理
  4. 如果不符合要求,可以抛出错误,标记错误位置
  5. 通过后,组合输出所有内容到 <img xxxx ./>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题