解析HTML正则

 

如例：

/<\s*(\S+)(\s[^>]*)?>[\s\S]*<\s*\/\1\s*>/

想要看懂正则表达式，最好的办法是一步一步解析：

1）、先从'[\s\S]*'为分界点，前面的内容可以划分为'<\s*(\S+)(\s[^>]*)?>'。
    '\s'表示匹配任何空白字符，包括空格、制表符、换页符等等，等价于'[\f\n\r\t\v]'。
    '*'表示匹配前面的子表达式(也就是'\s')0次或多次。
    '(\S+)'表示一个分组，'\S'表示匹配任何非空白字符，'+'表示匹配前面的子表达式（也就是'\S'）1次或多次。
    '(\s[^>]*)'表示一个分组，'\s'表示匹配任何空白字符，包括空格、制表符、换页符等等，等价于'[\f\n\r\t\v]'，'[^>]'是一个中括号表达式，'^'表示查找不属于范围内的字符，'^>'就表示匹配除'>'之外的字符，'*'表示匹配除'>'以外的前面的子表达式('\s')0次或多次。
    ?表示匹配前面的子表达式'(\S+)(\s[^>]*)' 0次或1次
    最后总结前后的'<'和'>'，类似于'<span>'

2）、再分析'[\s\S]*'后面的部分'<\s*\/\1\s*>'
    '\s'表示匹配任何空白字符，包括空格、制表符、换页符等等，等价于'[\f\n\r\t\v]'。
    '*'表示匹配前面的子表达式(也就是'\s')0次或多次。
    '\/'的\是转义符，转义'/'，例如'</span>'中的'/'
    '\1'要和正则表达式集合'()'一起使用，表示重复正则第一个圆括号内匹配到的内容。以此类推,'\2'表示重复正则第二个圆括号内的内容，这里指的就是'(\S+)'
    '\s'表示匹配任何空白字符，包括空格、制表符、换页符等等，等价于'[\f\n\r\t\v]'。
    '*'表示匹配前面的子表达式(也就是'\s')0次或多次。
    最后总结' <\s*\/\1\s*>'，类似于HTML结束标签'</span>'

3）再看'[\s\S]*'
    '[]'是一个中括号表达式，'\s\S'放在其中，就表示一个字符集合。表示可以任意匹配'\s'或'\S'。
    '\s'表示匹配任何空白字符，包括空格、制表符、换页符等等，等价于'[\f\n\r\t\v]'。
    '\S'表示匹配任何非空白字符。
    '*'表示匹配前面的子表达式(也就是'[\s\S]')0次或多次。
    最后总结就是'<span></span>'标签中的内容