一段优美的正则

记录下来,一段优美的代码。来源于jQuery,不过我是从kissy1.3源码中看到的。看来kissy还是大量参照了jquery啊。
代码如下:

var R_XHTML_TAG = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig;
function create( html ){
//...略
html = html.replace(R_XHTML_TAG, '<$1><' + '/$2>');
//...略
}

代码非常简单,作用是按照XHTML标准为需要成对出现的标签做补全。
例如:'<div/>'这样子的字符串通过通过处理后得到<div></div>
作用就是这样子。下面开始分析代码。

1、正则的开始是/<,代表正则要匹配的第一个字符时<
2、(?!area|br|col|embed|hr|img|input|link|meta|param),代表接下来的字符不匹配所列标签名,也就是过滤掉直接关闭的标签。
(?!pattern) 这种语法叫做负向预查,在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows",但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。

3、(([\w:]+)[^>]*),首先需要注意这里的两个括号是代表两个获取匹配。获取的匹配结果待后续使用。由于有1,2两点约束为前提,[\w:]能够匹配的内容是紧跟在<号之后,切不为2中列举的标签的标签名(注:\w = [A-Za-z0-9_])。
[^>]*代表所有非>号字符,用于匹配标签内的属性。
两段加起来就可以匹配 div width='960px'这样子的结构了。
两个匹配结果$1也就等于 标签名+属性的组合如 div width='960px' $2 等于标签名如div

4、表达式以\/>结尾。没什么好解释的

正则匹配之后另一个需要关心的问题就是如何修改字符串的问题,怎么补全丢掉的结束标签。
这里利用了String.replace()的能力。
字符串 String的 replace() 方法执行的是查找并替换的操作。它将在 String中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。

replacement 可以是字符串,也可以是。如果函数它是字符串,那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示,它说明从模式匹配得到的字符串将用于替换。

字符 替换文本
$1、$2、...、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$& 与 regexp 相匹配的子串。
$` 位于匹配子串左侧的文本。
$' 位于匹配子串右侧的文本。
$$ 直接量符号。

这就是'<$1><' + '/$2>'的意义,把第三段匹配中保存的第一个结果放入开始标签,把第二个结果放入结束标签如$1 = div width='960px' , $2 = div 组合起来就是<div width='960px'></div>
瞧,是不是很棒。
END
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值