jQuery中rsingleTag详解

'./var/rsingleTag'是在src/core/var目录中定义的HTML标签正则表达式,其代码如下


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

这里用到了正则表达式中2个较为高级的功能:分组捕获和反向引用,以前我有相应的文章解释相关内容,这里再简单提一下。当正则表达式中出现了()包裹的内容时,括号中的内容会被捕获到对应的分组中,使用reg.exec(some_string)返回的就是分组捕获的数组;被捕获到的数组,依次被计为1,2,3...(一般0为整个匹配字符串),它们可以在正则表达式中引用这个分组,通过\1,\2进行操作(在正则表达式中,js中其他地方可以通过$1,$2来表示对应的分组,比如some_string.replace(some_reg_with_group, "$1$1")会将匹配的第一个分组重复。回过头来看rsingleTag,乍一看很复杂,仔细看可以拆分成2大部分,匹配开头的^和末尾的$就不解释了。

  • 第一部分"<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>",这部分匹配的是任意一个HTML标签。以"<"开始,紧接着是标签名称分组"([a-z][^\/\0>:\x20\t\r\n\f]*)",用来捕获这个标签的名字这个分组中要求标签名称必须a-z的字符开头,[^]代表取反,即允许出现除了"/"(\/)、空字符(\0)、">",":",空格(\x20,x20是16进制数,对应的10进制是32,也就是空格),制表符(\t),回车(\r),换行(\n),换页(\f)这些字符以外的任何其他字符任意次,[\x20\t\r\n\f]*用来匹配多余的一些空格、换行等特殊字符。而"/"这个符号可能出现1次,或者不出现,所以使用"\/?"来进行匹配。举一个很简答的小栗子就能说明白,假设带匹配的字符串是'<img />',那么匹配到的第一个分组就是img
  • 第二部分"(?:<\/\1>|)"就非常简单了,()表明这一部分也是一个分组,但是"?:"是说虽然匹配这个分组,但是不给它分配序号,不进行反向引用。剩下的部分<\/\1>|就是说,匹配一个字符串,它要么是空,要么是形如""这种,其中\1是第一部分中捕获到的分组名称。例如'<a ></a>'捕获的结果是["<a ></a>", "a"],"<img />"捕获的结果是["<img />", "img"]
因此,这个正则表达式只能匹配不包含任何属性的标签,比如"<a ></a>","<img />"等,包含任何属性或者innerText,innerHTML都无法匹配。
Show Comments

Get the latest posts delivered right to your inbox.