HTML标记中语法突出显示属性的正则表达式

Question

我正在为Sublime/TextMate语言文件中的一些语法高亮处理正则表达式,它要求我在非自我关闭的html标记上"开始",并在相应的结束标记上结束:

• 开始: (<)([a-zA-Z0-9:.]+)[^/>]*(>)

• 结束: (</)(\2)([^>]*>)

到目前为止,一切都很好,我能捕捉到标签名称,它匹配才能够应用适当的图案为标记之间的区域.

jsx-tag-area:
    begin: (<)([a-zA-Z0-9:.]+)[^/>]*>
    beginCaptures:
      '1': {name: punctuation.definition.tag.begin.jsx}
      '2': {name: entity.name.tag.jsx}
    end: (</)(\2)([^>]*>)
    endCaptures:
      '1': {name: punctuation.definition.tag.begin.jsx}
      '2': {name: entity.name.tag.jsx}
      '3': {name: punctuation.definition.tag.end.jsx}
    name: jsx.tag-area.jsx
    patterns:
    - {include: '#jsx'}
    - {include: '#jsx-evaluated-code'}

现在我也希望能够在开始标记中捕获零个或多个html属性,以便能够突出显示它们.

所以,如果标签是 <div attr="Something" data-attr="test" data-foo>

这将能够匹配attr,data-attr和data-foo,还有<和div

喜欢的东西(这很粗糙):

(<)([a-zA-Z0-9:.]+)(?:\s(?:([0-9a-zA-Z_-]*=?))\s?)*)[^/>]*(>)

它不需要是完美的,只是为了一些语法高亮,但我很难弄清楚如何在标签内实现多个捕获组,我是否应该使用环顾等,或者这是否是甚至可以使用单个表达式.

编辑:这里有关于具体案例/问题的更多细节 - https://github.com/reactjs/sublime-react/issues/18

Answer 1

我可能会找到一个可能的解决方案。

它并不完美，因为正如 @skamazin 在评论中所说，如果您尝试捕获任意数量的属性，则必须重复匹配属性的模式，次数与您想要限制允许的属性数量相同。

正则表达式非常可怕，但它可能对您的目标有用。也许可以稍微简化一下，或者您可能需要调整一些东西

对于只有一个属性，它将是这样的：

(<)([a-zA-Z0-9:.]+)(?:(?: ((?<= )[^ ]+?(?==| |>)))(?:=[^ >]+)(?: |>))

演示版

对于更多属性，您需要根据需要多次添加：

(?:(?:((?<= )[^ ]+?(?==| |>)))(?:=[^ >]+)(?: |>))?

例如，如果您想允许最多 3 个属性，您的正则表达式将如下所示：

(<)([a-zA-Z0-9:.]+)(?:(?: ((?<= )[^ ]+?(?==| |>)))(?:=[^ >]+)(?: |>))(?:(?:((?<= )[^ ]+?(?==| |>)))(?:=[^ >]+)?(?: |>))?(?:(?:((?<= )[^ ]+?(?==| |>)))(?:=[^ >]+)?(?: |>))?

演示版

告诉我它是否适合您以及您是否需要更多详细信息。