Regular expression for extracting tag attributes

by

Update 2021: Radon8472 proposes in the comments the regex https://regex101.com/r/tOF6eA/1 (note regex101.com did not exist when I wrote originally this answer)

<a[^>]*?href=(["\'])?((?:.(?!\1|>))*.?)\1?

Update 2021 bis: Dave proposes in the comments, to take into account an attribute value containing an equal sign, like <img src="test.png?test=val" />, as in this regex101:

(\w+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?

Update (2020), Gyum Fox proposes https://regex101.com/r/U9Yqqg/2 (again, note regex101.com did not exist when I wrote originally this answer)

(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?

Applied to:

<a href=test.html class=xyz>
<a href="test.html" class="xyz">
<a href="https://stackoverflow.com/questions/317053/test.html" class="xyz">
<script type="text/javascript" defer async id="something" onload="alert('hello');"></script>
<img src="test.png">
<img src="a test.png">
<img src=test.png />
<img src=a test.png />
<img src=test.png >
<img src=a test.png >
<img src=test.png alt=crap >
<img src=a test.png alt=crap >

Original answer (2008):
If you have an element like

<name attribute=value attribute="value" attribute="value">

this regex could be used to find successively each attribute name and value

(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?

Applied on:

<a href=test.html class=xyz>
<a href="test.html" class="xyz">
<a href="https://stackoverflow.com/questions/317053/test.html" class="xyz">

it would yield:

'href' => "https://stackoverflow.com/questions/317053/test.html"
'class' => 'xyz'

Note: This does not work with numeric attribute values e.g. <div id="1"> won’t work.

Edited: Improved regex for getting attributes with no value and values with ” ‘ ” inside.

([^\r\n\t\f\v= '"]+)(?:=(["'])?((?:.(?!\2?\s+(?:\S+)=|\2))+.)\2?)?

Applied on:

<script type="text/javascript" defer async id="something" onload="alert('hello');"></script>

it would yield:

'type' => 'text/javascript'
'defer' => ''
'async' => ''
'id' => 'something'
'onload' => 'alert(\'hello\');'

More Related Contents:

  1. What to do Regular expression pattern doesn’t match anywhere in string?
  2. Can you provide some examples of why it is hard to parse XML and HTML with a regex? [closed]
  3. Regex select all text between tags
  4. RegEx match open tags except XHTML self-contained tags
  5. html parsing of cricinfo scorecards
  6. Regular expression to remove HTML tags from a string [duplicate]
  7. Trouble with parsing table data in perl
  8. Regex replace text outside html tags
  9. Sed remove tags from html file
  10. How do HTML parses work if they’re not using regexp?
  11. regular expression to extract text from HTML
  12. highlight words in html using regex & javascript – almost there
  13. Regex to match all HTML tags except and
  14. How to extract data from html table in shell script?
  15. Easiest way to extract the urls from an html page using sed or awk only
  16. Strip all HTML tags except links
  17. Parse html using C
  18. Favicon not showing up in Google Chrome [duplicate]
  19. Make a div fill up the remaining width
  20. How to make fill height
  21. Highlight label if checkbox is checked
  22. White space at top of page
  23. How to apply two CSS classes to a single element
  24. How does the vertical-align property work?
  25. Disable form autofill in Chrome without disabling autocomplete [duplicate]
  26. HTML — two tables side by side [duplicate]
  27. How do I stretch a background image to cover the entire HTML element?
  28. wrap anchor tag around li element
  29. center table in HTML
  30. Open local files(file://) using Chrome

Leave a Comment