jquery源码分析之html标签匹配（rsingleTag.js）

jquery–rsingleTag.js概述

这个源码文件使用了正则表达式来匹配html标签。
源码文件地址：rsingleTag.js

jquery–rsingleTag.js源码分析

先把源码贴出来

define( function() {    "use strict";    // Match a standalone tag    return ( /^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i );} );

首先解释下define函数，这个是用来定义模块的，详情请看我的这篇文章requireJs使用初探及模块定义define函数的用法。

继续解释源码，源码中什么也没有就一个正则表达式/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i，我们来一点点解释这个正则表达式。

–1-start
^匹配一个字符串的头部
–1-end

–2-start
<匹配标签中的“<”字符
–2-end

–3-start
([a-z][^\/\0>:\x20\t\r\n\f]*)定义一个子表达式。
第一部分[a-z]表示一个字符集匹配一个a到z的任意字母，由于表达式定义了标志i所以不区分大小写。像<a>或者<A>都是可以匹配的，但注意是a-z任意字母，其他的像<:>,<1>都不可以。
第二部分[^\/\0>:\x20\t\r\n\f]*定义了一个字符集表示在一个标签像<a>字母a的后边可以跟上处了/,:,空格符，制表符等空白字符外的任意字符。比如像<a'>在这里就是合法的。第二部分中的^表示除了后边列举的字符都可以，*表示符合条件的字符可以有0个或多个。
chrome浏览器测试结果：

–3-end

–4-start
[\x20\t\r\n\f]*：
[\x20\t\r\n\f]定义了一个字符集，允许空格符，换行符等空白字符。
*表示允许由字符集包含的字符组成长度大于等于0的字符序列。
也就是说<a >是合法的
chrome测试结果：

–4-end

–5-start
\/?>匹配>或/>。
因为定义正则表达式使用/.../i，所以使用/必须经过转义\/。
?代表匹配/字符0次或1次。
所以<a/>或<a>都是合法的

–5-end

–6-start
(?:<\/\1>|)$

(?:)定义了一个不捕获子表达式。什么意思呢，看个例子就好了

我们使用()定义子表达式，子表达式有两个作用，一个是分组（为了组合语义，重复次数等），另一个就是捕获子表达式匹配的字符串（比如通过\1或exec获得匹配到的字符串）。但是当使用(?:)表示子表达式时，只匹配不捕获。

<\/匹配</

\1表示同此正则表达式第一个子表达式一样的值。第一个子表达式的计算方式是从左括号开始的。
举个例子：

>匹配>

(?:<\/\1>|)中的|表示匹配</第一个子表达式的值>或匹配什么都没有。
举个例子：

$匹配字符串末尾

–6-end

i标识符表示不区分大小写。