美文网首页
jQuery学习笔记(正则)

jQuery学习笔记(正则)

作者: 江枫 | 来源:发表于2014-09-19 22:25 被阅读83次

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]+$/

相关文章

  • jQuery学习笔记(正则)

    jQuery中使用了大量的正则表达式,这些正则汇聚了作者的智慧,值得细心琢磨. url 分割 下面这个正则用来解析...

  • JQuery零基础语法速学

    JQuery学习笔记 1.认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼...

  • 学习笔记 正则表达式

    2021.01.19 北京海淀 -2℃ 小雪转晴 正则表达式学习笔记 说明:该笔记参考“菜鸟教程”网站正则表达式...

  • 正则表达式学习笔记

    正则表达式学习笔记 一篇记录了学习正则表达式的笔记。 1. 转义字符 在 HTMl 中转义字符以 & 符号开头,分...

  • Struts2学习笔记(核心组件详解)

    [toc] Struts2学习笔记(核心组件详解) @(_1每日记录) 返回到JQuery学习笔记@达内lang笔...

  • 【转】JQuery全面总结

    1、jquery学习总结(超级详细) 转自脚本之家hebedich的投稿 2、jQuery笔记总结篇 转自Poet...

  • jquery正则

    看到实用,原文地址 http://blog.csdn.net/ghostmac/article/details/6...

  • 跟我一起学jQuery——第一集

    《锋利的JQuery》第二版阅读笔记-第一章 jQuery对象和DOM对象 想学习jQuery,首先要学会区分jQ...

  • Python学习随笔

    本笔记整理自中谷教育在线教育视频 学习笔记——正则表达式常用符号 这里学习过正则表达式后,简单做了一个爬虫程序,效...

  • L1正则化与L2正则化学习笔记

    本文是本人学习了相关机器学习课程后的一个关于L1正则化与L2正则化的学习笔记。 正则化 从上图1 可知,随着训练迭...

网友评论

      本文标题:jQuery学习笔记(正则)

      本文链接:https://www.haomeiwen.com/subject/gglutttx.html