为什么我的正则表达式不能使HTML标签名称正常工作？

Question

I'm trying to get tag names from HTML strings using the following Regex:

<(.*)(?:\s+(\S*)=.*)?>.*<\/\1?>

Here's some HTML I'm applying it to:

<p><a href="http://www.quackit.com/html/tutorial/html_links.cfm">Example Link</a></p>
<div class="more-info"><a href="http://www.quackit.com/html/examples/html_links_examples.cfm">More Link Examples...</a></div>

As expected, I am getting p and div as matches. But for some reason this isn't detecting a . Why not?

Answer 1

Here is a RegEx to match all HTML tags with all possibilities as follows:

<(?(?=!--)!--[\s\S]*--|(?(?=\?)\?[\s\S]*\?|(?(?=\/)\/[^.-\d][^\/\]'"[!#$%&()*+,;<=>?@^`{|}~ ]*|[^.-\d][^\/\]'"[!#$%&()*+,;<=>?@^`{|}~ ]*(?:\s[^.-\d][^\/\]'"[!#$%&()*+,;<=>?@^`{|}~ ]*(?:=(?:"[^"]*"|'[^']*'|[^'"<\s]*))?)*)\s?\/?))>

Explanation:

<                                                       # Tags always begin
  (?                                                    # What if...
    (?=!--)                                             # We have a comment?
      !--[\s\S]*--                                      # If so, anything goes between <!-- and -->.
      |                                                 # OR
      (?                                                # What if...
        (?=\?)                                          # We have a scripting tag?
          \?[\s\S]*\?                                   # If so, anything goes between <? and ?>.
          |                                             # OR
          (?                                            # What if...
            (?=\/)                                      # We have a closing tag?
              \/                                        # It should begin with a /.
              [^.-\d]                                   # Then the tag name, which can't begin with any of these characters.
              [^\/\]'"[!#$%&()*+,;<=>?@^`{|}~ ]*        # And can't contain any of these characters.
              |                                         # OR... we must have some other tag.
              [^.-\d]                                   # Tag names can't begin with these characters.
              [^\/\]'"[!#$%&()*+,;<=>?@^`{|}~ ]*        # And can't contain any of these characters.
                (?:                                     # Do we have any attributes?
                  \s                                    # If so, they'll begin with a space character.
                  [^.-\d]                               # Followed by a name that doesn't begin with any of these characters.
                  [^\/\]'"[!#$%&()*+,;<=>?@^`{|}~ ]*    # And doesn't contain any of these characters.
                    (?:                                 # Does our attribute have a value?
                      =                                 # If so, the value will begin with an = sign.
                      (?:                               # The value could be:
                      "[^"]*"                           # Wrapped in double quotes.
                      |                                 # OR
                      '[^']*'                           # Wrapped in single quotes.
                      |                                 # OR
                      [^'"<\s]*                         # Not wrapped in anything.
                      )                                 # That does it for our attribute value.
                    )?                                  # If the attribute is boolean it won't need a value.
                )*                                      # We could have any number of attributes.
          )                                             # That does it for our closing vs other tag check.
          \s?                                           # There could be some space characters before the closing >.
          \/?                                           # There might also be a / if this is a self-closing tag.
      )                                                 # That does it for our script vs html tag check.
  )                                                     # That does it for our comment vs script tag check.
>

Answer 2

to answer the "why not?": the nested a tags are considered .* (anything) which means your regex can only match first level tags. what you need to do is try to match nested tags recursively. Annoyingly, Javascript does not provide the PCRE recursive parameter (?R), so it is far from easy to deal with the nested issue. It can be done however. check this article