title: Regular expression for syntax highlighting attributes in HTML tag
body: <p>I'm working on regular expressions for some syntax highlighting in a Sublime/TextMate language file, and it requires that I "begin" on a non-self closing html tag, and end on the respective closing tag:</p>
  
  <ul>
  <li><p>begin: <code>(&lt;)([a-zA-Z0-9:.]+)[^/&gt;]*(&gt;)</code></p></li>
  <li><p>end:   <code>(&lt;/)(\2)([^&gt;]*&gt;)</code></p></li>
  </ul>
  
  <p>So far, so good, I'm able to capture the tag name, and it matches to be able to apply the appropriate patterns for the area between the tags.</p>
  
  <pre><code>jsx-tag-area:
      begin: (&lt;)([a-zA-Z0-9:.]+)[^/&gt;]*&gt;
      beginCaptures:
        '1': {name: punctuation.definition.tag.begin.jsx}
        '2': {name: entity.name.tag.jsx}
      end: (&lt;/)(\2)([^&gt;]*&gt;)
      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'}
  </code></pre>
  
  <p>Now I'm also looking to also be able to capture zero or more of the html attributes in the opening tag to be able to highlight them. </p>
  
  <p>So if the tag were <code>&lt;div attr="Something" data-attr="test" data-foo&gt;</code></p>
  
  <p>It would be able to match on <code>attr</code>, <code>data-attr</code>, and <code>data-foo</code>, as well as the <code>&lt;</code> and <code>div</code></p>
  
  <p>Something like (this is very rough):</p>
  
  <p><code>(&lt;)([a-zA-Z0-9:.]+)(?:\s(?:([0-9a-zA-Z_-]*=?))\s?)*)[^/&gt;]*(&gt;)</code></p>
  
  <p>It doesn't need to be perfect, it's just for some syntax highlighting, but I was having a hard time figuring out how to achieve multiple capture groups within the tag, whether I should be using look-around, etc, or whether this is even possible with a single expression.</p>
  
  <p>Edit: here are more details about the specific case / question - <a href="https://github.com/reactjs/sublime-react/issues/18">https://github.com/reactjs/sublime-react/issues/18</a></p>