jQuery学习笔记(正则)

jQuery中使用了大量的正则表达式,这些正则汇聚了作者的智慧,值得细心琢磨.

url 分割

下面这个正则用来解析url,使用它可以获取url中的各个部分(protocol,host,port)

rurl = /^([\w.+-]+:)(?:\/\/([ ^\/?#:]*)(?::(\d+)|)|)/

涉及的知识点:

  • ^匹配一个输入或一行的开头, 例如/^a/匹配"an" 不匹配"An",如果设置了Multiline属性,也匹配“\n”或“\r”之后的位置.出现在中括号时,匹配未包含其之后的任意字符,例如[^xyz]表示不匹配xyz

  • 分组分为捕获性分组和非捕获性分组,捕获分组会存储匹配的内容,以便下次使用,非捕获性分组不存储匹配的内容,以(?:...)表示

  • [\w.+-]protocol包含字母数字,.+-这几类字符,并且是以字母开头,参考URI .+都是特殊字符,为什么不转义呢?[\w.+-]奇怪的是chrome下面测试[\w.+-]和[\w.+-]是等价的?‍

  • |选择符,rurl中选择符的使用有点奇怪,/x|/的意思是匹配x或者空字符串/(x)|()/.exec('a') -> ["",undefined, ""];

跨域

很多文章都在讲跨域,到底什么是跨域呢,看看ajax中是如何判断跨域的

if ( s.crossDomain == null ) {
    parts = rurl.exec( s.url.toLowerCase() ); //使用rurl切割用户请求的
    urls.crossDomain = !!( parts &&          //ajaxLocParts是当前页面的
         ( parts[ 1 ] !== ajaxLocParts[ 1 ] || parts[ 2 ] !== ajaxLocParts[ 2 ] ||
         ( parts[ 3 ] || ( parts[ 1 ] === "http:" ? "80" : "443" ) ) !==
         ( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? "80" : "443" ) ) )
    );
}
  • 协议不同
  • 域名不同
  • 端口不同

请求加时间戳,禁止浏览器缓存

function addDateStamp( url ){
    var rts = /([?&])_=[ ^&]*/
    return rts.test( url) ?

    // If there is already a '_' parameter, set its value
    url.replace( rts, "$1_=" + new Date().getTime() ) :  // Otherwise add one to the end
    url + ( /\?/.test( url ) ? "&" : "?" ) + "_=" + new Date().getTime();
}

/%20/

jquery工具函数$.param用于对象序化

例如$.param({a : ' '}) -> a=+, 为什么结果是a=+而不是a=空格?

因为$.param方法内部使用encodeURIComponent对字符进行编码,空格经过编码是%20,然后使用str.replace( /%20/g , "+" )替换%20.

为什么要将空格变为加号呢?

w3c中关于 Form content types中要求浏览器必须实现 application/x-www-form-urlencoded 和 multipart/form-data编码规范,二前者明确规定 Space characters are replaced by `+'

下面是一些网络参考:

一个题外话,我们知道http response有一个contentType响应头,http request 也可以设置contentType,你知道吗?有什么作用呢?

response header的contentType是告诉浏览器,服务器回传的数据是什么类型,浏览器要如何处理。

request header 的contentType自然就是告诉服务器,浏览器传给你的时什么数据,你应该如何去解码处理等等。

jquery 中ajax也是会默认设置request 的contentType header,

1.7.2版本之前的值是application/x-www-form-urlencoded,之后的版本加上了charset=UTF-8。

对于使用ajax传递中文的情况,在使用1.7.2之前的版本会出现中文乱码的情况。处理的方案也很简单,就是覆盖原先的contentType,使用contentType=application/x-www-form-urlencoded;charset=UTF-8。

替换函数参数问题

str.replace(ExpReg , replacementFn )

替换函数的第一个参数代表的是正则的匹配结果,之后的参数对应的是正则中的分组,_1 代表的就是第一个分组(a)的匹配结果。

var regExp = /(a)(b)(c)/;
function replacement( _, _1, _2, _3 ){
    return _3 + _2 + _1 ;
}
console.log('abc'.replace(regExp,replacement));  // output: cba

idGetByProgram.replace( /'|\/g , "\$&" )

Sizzle函数中有一处代码,将两个特殊字符('和)添加转义字符\,为什么要做这个事情呢?

$&的值指的是正则第一个参数匹配到的结果

去除首尾空格

sizzle中有一个去除首尾空格的正则

rtrim = /^[\x20\t\r\n\f]+|((?:^|[ ^\\])(?:\\.)*)[\x20\t\r\n\f]+$/g

((?:|[\])(?:\.)*)东东是用来干什么的,是有什么特殊情况需要考虑吗?

下面的,也能够去掉首尾空格,

/^\s+|\s+$/g

jquery本身也定义了一个去除空格的正则,名字也叫rtrim,但是两个正则写法不同为什么呢?

rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,656评论 18 139
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 1,045评论 0 2
  • 9.19--9.23 第7章 正则表达式 正则表达式是一个拆分字符串并查询相关信息的过程。 推荐练习网站: js ...
    如201608阅读 1,027评论 0 4
  • 初衷:看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印...
    DCbryant阅读 4,009评论 0 20
  • 今天是清明,这已经是不知道难过了多久的一天,总是担心你在另一个世界过的不好,有几次梦见我们回到了从前,你忙前忙后的...
    葵花子精灵阅读 556评论 0 2