regex - 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 在评论中所说，如果您 try catch 任意数量的属性，则必须重复匹配属性的模式，次数与您想要限制的属性数量相同。将允许。

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

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

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

DEMO

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

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

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

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

DEMO

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