javascript高级程序设计(第三版)学习笔记(一) 正则表达式整理

1、创建正则表达式

第一种方式:注意这里的正则表达式不能使用单引号或者双引号,如下

var pattern1 = /[abc]/i; // 匹配第一个"a"或"b"或"c",不区分大小写

第二种方式:使用RegExp构造函数创建,该构造函数传入两个参数,都是字符串,所以需要特别注意"\"符号的转换,所有元字符(下面有讲元字符)需要双重转义,如下

复制代码 代码如下:

var patt1 = new RegExp("[abc]","gi"); // 这里等价于 var patt1 = /[abc]/gi;

alert("[abc]".match(patt1)); // return a

var patt2 = new RegExp("\\[abc\\]","gi"); // 这里等价于 var patt2 = /\[abc\]/gi; 而在引号内"\"必须转移为"\\"

alert("[abc]".match(patt2)); // return [abc]

说到这里思考两个问题:

a、如果这里的正则表达式,是通过字符串和某个变量动态组合而成的,如何使用第一种方式创建正则表达式?

显然,用第二种创建正则表达式的方式,肯定没有任何问题,因为,传入的第一个参数本身就是一个字符串。要用第一种方式创建,这里需要用到eval()函数,如下

复制代码 代码如下:

var str = "abc"; // 这可能是一个动态的变量

var patt1 = eval("/\\["+str+"\\]/"); // 等价于 var patt1 = /\[abc\]/;

alert("[abc]".match(patt1)); // return [abc]

b、上面两种创建方法有什么不同之处?

《javascript高级程序设计(第三版)》中讲:区别在于是否共享,使用第一种方式创建的正则,共享,第二种不共享。经楼主实践发现结果有点出入,两种创建方式结果一样,都是(true true true),各位可以自行测试。所以这里MARK一下,这两种创建方式没什么区别。

复制代码 代码如下:

var re = null,i;

for(i=0;i<3;i++){

re = /cat/g;//书:实例属性不会重置,下面的结果应该是 true false true

alert(re.test("catasdfdfdf"));

}

for(i=0;i<3;i++){

re = new RegExp("cat","g");//书:实例属性会重置,下面的结果应该是 true true true

alert(re.test("catasdfdfdf"));

}

这里顺便讲一下匹配模式的三个标志:g、i、m

g:设置了g之后,模式被应用于所有字符串,发现第一个匹配项后,不会立即停止,模式的lastIndex会移至下一个位置,待下一次应用此模式的时候,再次从lastIndex开始匹配,如果匹配到最后了,lastIndex才会被重置为0;

i:这个很好理解,不区分大小写;

m:表示多行模式,即在到达一行文本末尾的时候还会继续查找下一行,进行匹配;

2、元字符: ( [ { \ ^ $ | ) ? * + . ] }

这些字符在正则表达式中有一或多种特殊用途,因此如果想匹配这些字符,都需要进行转义。如:

复制代码 代码如下:

var pattern1 = /\[abc\]/i; // 匹配第一个"[abc]",不区分大小写

var pattern2 = /[abc]/i; // 匹配第一个"a"或"b"或"c",不区分大小写

3、RegExp实例属性

global、ignoreCase、multiline、lastIndex、source,这些属性用处不大,其中lastIndex可用于调试,简单示例

复制代码 代码如下:

var patt1 = /cat/g;

patt1.test("catasdfdfdf");

dw(patt1.global); // 是否设置了g,全局模式 // true

dw(patt1.ignoreCase); // 是否设置了i,不区分大小写 // false

dw(patt1.multiline); // 是否设置了m,多行匹配,到了一行末尾,能够继续匹配下一行 // false

dw(patt1.lastIndex); // 表示开始搜索下一个匹配项的开始位置,第一次为0 // 3

dw(patt1.source); // 返回正则表达式字面量 // cat

4、范围集合类:[] ^ |

[abc],表示a或者b或者c中的任意一个字符

[a-z]、[A-Z]、[0-9],表示小写字母,大写字母,0到9的数字

[^a-z]、[^A-Z]、[^0-9],表示非小写字母,非大写字母,非0到9的数字

[abc|def],表示abc和def中的任意一个

复制代码 代码如下:

alert(/[abc]/.test("a"));//true

alert(/[abc]/.test("gg"));//false

alert(/[^abc]/.test("a"));//false

alert(/[^abc]/.test("gg"));//true

alert(/[a-z]/.test("A"));//false

alert(/[A-Z]/.test("A"));//true

alert(/[abc|def]/.test("def"));//true

5、量词类:? * + {m} {m,n} {m,}

? 0或1次,放在量词后面,表示非贪婪品匹配,后面讲解

* 0或多次

+ 1或多次

{m} m次

{m,n} 至少m次,至多n次

{m,} 至少m次

复制代码 代码如下:

alert(/a?/.test("a"));//true

alert(/a?/.test("b"));//true 可以出现0次

alert(/a*/.test("a"));//true

alert(/a*/.test("b"));//true 可以出现0次

alert(/a+/.test("a"));//true

alert(/a+/.test("b"));//false

alert(/a{3}/.test("aaaaa"));//true

alert(/a{3}/.test("bbbbb"));//false 看到网上一些文章将,这里应该是0或者3次,这里楼主测试了几个浏览器,没有0次

alert(/a{3,5}/.test("aaaaa"));//true

alert(/a{3,5}/.test("bbbbbb"));//false

alert(/a{3,}/.test("aaaaa"));//true

alert(/a{3,}/.test("bbbbbb"));//false

6、边界类: ^ $ \b \B

^ 表示开头的标志,注意,不能紧接着左中括号,比如[^A-Z],这样表示非

$ 表示结尾的标志

\b 单词边界的标志,这样理解,它表示单词间那个看不到的东西,一侧是单词字符,一侧是非单词字符(包括各种标点和空白字符或中文)

\B 非单词边界的标志

复制代码 代码如下:

alert(/^居$/.test("居")); // 只限一个 居 true

alert(/^居$/.test("居居")); // 只限一个 居 false

alert(/\b啊/.test("a啊")); // true 思考一下:为什么这个和下面的结果不一样??

alert(/\b啊/.test("-啊")); // false

alert(/\B啊/.test("a啊")); // false

alert(/\B啊/.test("-啊")); // true

alert(/\b啊/.test("a啊")); 中,"a"和"啊"之间存在一个\b,因为\b的左边是"a",右边是"啊",所以能够匹配,为true;

相反:alert(/\b啊/.test("-啊")); 中,"啊"的左边有个\b,但是\b的左边是"-",不是单词字符,所以,不能匹配,为false

7、预定义类: \d \D \s \S \w \W .

\d 表示0-9的数字字符,相当于 [0-9]

\D 表示非0-9的数字字符,相当于 [^0-9]

复制代码 代码如下:

alert(/\d/.test("1"));//true

alert(/\D/.test("1"));//false

\s 空白字符,相当于 [\n\r\f\t\x0B ] ,注意空格也算

\S 非空白字符,相当于 [^\n\r\f\t\x0B ]

复制代码 代码如下:

alert(/\s/.test(" "));//true,空格也算

alert(/\S/.test("\n\r\f\t\x0B "));//false

alert(/\S/.test("\n\r\f\t\x0B \\"));//true

\w 单词字符,相当于 [a-zA-Z0-9_]

\W 非单词字符,相当于 [^a-zA-Z0-9_]

复制代码 代码如下:

alert(/\w/.test("afdas"));//true

alert(/\W/.test("afdas"));//false

(点). 表示除了\n和\r意外的任意字符,相当于 [^\n\r]

复制代码 代码如下:

alert(/./.test("\n\r"));//false ,只有这两个,其他的都能够被 . 匹配

alert(/./.test(" "));//true

8、RegExp实例方法:exec() test() match()

exec():返回第一个匹配项信息的数组,没能匹配成功返回null,用法:pattern.exec(str); 需要注意有没有"g"的不一样

复制代码 代码如下:

var re1 = /([a-z]*)bbb/;//贪婪

document.write(re1.test("abbbaabbb1234")+"<br />");//true

document.write(re1.exec("abbbaabbb1234")+"<br />");//abbbaabbb,abbbaa,这里贪婪匹配到abbaabbb,然后$1为abbbaa,所以此时返回abbbaabbb,abbbaa

var re1 = /([a-z]*)bbb/g;//贪婪

document.write(re1.test("abbbaabbb1234")+"<br />");//true

document.write(re1.exec("abbbaabbb1234")+"<br />");//null //因为设置了g标识,并为贪婪匹配,而上面的test已经贪婪匹配到abbbaabbb,后面只有1234,所以此时匹配不到,返回null

test():在只需要知道是否匹配,不需要知道具体匹配什么文本的情况下,使用这个放个比较方便,用法:pattern.test(str);

复制代码 代码如下:

var re1 = /([a-z]*)bbb/;//贪婪

document.write(re1.test("abbbaabbb1234")+"<br />");//true

document.write(re1.test("abbbaabbb1234")+"<br />");//true

document.write(re1.test("abbbaabbb1234")+"<br />");//true

var re1 = /([a-z]*)bbb/g;//贪婪

document.write(re1.test("abbbaabbb1234")+"<br />");//true

document.write(re1.test("abbbaabbb1234")+"<br />");//false 要理解这里为什么是false,因为设置了g,那么这次的匹配是从1开始的

document.write(re1.test("abbbaabbb1234")+"<br />");//true

match():这个函数比较特别,在设置g和不设置的情况下,表示形式完全不一样,在未设置g的情况下,表现形式和exec一样,设置了g的情况下,将返回所有匹配到的值的集合,用法:str.match(pattern)

复制代码 代码如下:

var re1 = /([a-z]*)bbb/;//贪婪

document.write("abbbaabbb1234".match(re1)+"<br />");//abbbaabbb,abbbaa 这里的abbbaabbb是匹配到的整个字符串,abbbaa是匹配第一个小括号的字符串

var re1 = /([a-z]*)bbb/g;//贪婪

document.write("abbbaabbb1234".match(re1)+"<br />");//abbbaabbb,在设置了g后,match()返回所有匹配到的值

最后,exec()和未设置g的match(), 最后返回的数组的第一个元素是整个匹配的字符串,如果模式中存在小括号,那么第二个元素是第一个括号的匹配内容,以此类推,第三个、第四个。。。比如:

复制代码 代码如下:

var re1 = /(a(b(c)))d/;

var str = "abcdd";

var matches = str.match(re1);

alert(matches[0]);//abcd //这里是整个字符串

alert(matches[1]);//abc //这里是第一个小括号

alert(matches[2]);//bc // 这里是第二个小括号

alert(matches[3]);//c // 这里是第三个小括号

9、贪婪和非贪婪匹配 ?

贪婪匹配:匹配到之后,继续往后匹配到字符串结束,然后选择最长的。比如:对于字符串"aaaaaab",要匹配/a+/,那么匹配的将是"aaaaaa",而不是一个"a"。

非贪婪匹配:匹配到之后,马上停止。比如:对于字符串"aaaaaab",要匹配/a+?/,那么匹配的将是"a",而不是一个"aaaaaa"。用法就是在量词后面加"?"。

复制代码 代码如下:

var re1 = /a+/;

var str = "aaaaaaa";

alert(str.match(re1));// aaaaaaa

var re1 = /a+?/;

var str = "aaaaaaa";

alert(str.match(re1));// a

下面给一个综合一点的例子:讲解了贪婪和非贪婪,全局g,exec和match的区别???

复制代码 代码如下:

var re1 = /([a-z]*)bbb/;//贪婪

var re2 = /([a-z]*?)bbb/;//非贪婪

document.write(re1.test("abbbaabbb1234")+"<br />");//true

document.write(re1.exec("abbbaabbb1234")+"<br />");//abbbaabbb,abbbaa,这里贪婪匹配到abbaabbb,然后$1为abbbaa,所以此时返回abbbaabbb,abbbaa

document.write("abbbaabbb1234".match(re1)+"<hr>");//abbbaabbb,abbbaa,这里贪婪匹配到abbaabbb,然后$1为abbbaa,所以此时返回abbbaabbb,abbbaa

document.write(re2.test("abbbaabbb1234")+"<br />");//true

document.write(re2.exec("abbbaabbb1234")+"<br />");//abbb,a ,这里非贪婪匹配到abbb,然后$1为a,所以此时返回abbb,a

document.write("abbbaabbb1234".match(re2)+"<hr>");//abbb,a ,这里非贪婪匹配到abbb,然后$1为a,所以此时返回abbb,a

var re3 = /([a-z]*)bbb/g;//贪婪

var re4 = /([a-z]*?)bbb/g;//非贪婪

document.write(re3.test("abbbaabbb1234")+"<br />");//true

document.write(re3.exec("abbbaabbb1234")+"<br />");//null ,因为设置了g标识,并为贪婪匹配,而上面的test已经贪婪匹配到abbbaabbb,后面只有1234,所以此时匹配不到,返回null

document.write("abbbaabbb1234".match(re3)+"<hr>");//abbbaabbb,注意在设置了g标识后,match只返回匹配到的所有值,这里因为是贪婪匹配,所以匹配了abbbaabbb

document.write(re4.test("abbbaabbb1234")+"<br />");//true

document.write(re4.exec("abbbaabbb1234")+"<br />");//aabbb,aa ,因为设置了g标识,并为非贪婪匹配,而上面的test已经贪婪匹配到abbb,后面只有aabbb1234,所以此时在此匹配到aabbb,此时$1为aa,所以返回aabbb,aa

document.write("abbbaabbb1234".match(re4)+"<hr>");//abbb,aabbb 注意在设置了g标识后,match只返回匹配到的所有值,这里因为是非贪婪匹配,所以匹配了abbb,aabbb

10、反向引用

正则表达式中的匹配组捕获的子字符串。每个反向引用都由一个编号或名称来标识,并通过“\编号”表示法进行引用。

复制代码 代码如下:

/(\w+)/.test("hello-world");

dwl(RegExp.$1);//hello

dwl(/(居)\1/.test("居居"))//true 这里的\1表示第一个小括号里面的内容

dwl("aa bbb cccc".replace(/(\w{2,}) (\w{2,}) (\w{2,})/,"$3 $2 $1")); // cccc bbb aa

11、非捕获性分组 ?:

并不是每个小括号都能通过反向引用进行捕获,在小括号后面加上"?:",即可进行设置非捕获性分组。

复制代码 代码如下:

/(\w+)-(\w+)/.test("hello-world");

alert(RegExp.$0);//undefined

alert(RegExp.$1);//""不会被捕获

alert(RegExp.$2);//world

12、正向前瞻 ?= 和负向前瞻 ?!

(?=str) 匹配后面紧跟是str,比如 he 能够通过模式 /he(?=llo)/ 匹配 字符串 "hello"

(?!str) 匹配后面紧跟不是str,比如 hel 能够通过模式 /he(?!llo)/ 匹配 字符串 "hello"

复制代码 代码如下:

//这样理解,将(?=str)或者(?!str)当做条件,然后考虑匹配其他的部分,匹配到了之后,再拿条件作对比,看符不符合

dwl("he-lloworld".match(/(\w+)(?=world)/g)); //llo 这里先匹配(\w+),找到两个块,he和lloworld,其中he不符合(?=world),而lloworld,只要拆成llo和world连接,就符合(?=world),即,llo链接了一个world,所以这里匹配了llo

dwl("he-lloworld".match(/(\w+)(?!world)/g)); //he,lloworld 这里先匹配(\w+),找到两个块,he和lloworld,其中he不符合(?=world),而lloworld,只要不拆,就符合(?!world),即,llo链接了一个world,所以这里匹配了he,lloworld

13、出几个实例题目?

a、讲一个字符串中的所有英文单词首字母大写?

复制代码 代码如下:

var str = "你好hello世界woRld,我i爱love你you";

var str = str.toLowerCase().replace(/\b\w|\s\w/g,function(s){

return s.toUpperCase();

});

alert(str)

b、去除html代码中的所有标签,除了a标签

复制代码 代码如下:

var str = "<p><a href='http://www.jb51.net/'>居居居居居居居居居</a ></p><hr/><p> by <em>居居居居居居居居居</em></p>";

var str = str.replace(/<(?!(\/?a))(.|\s)*?>/g,""); // 这里用到了 负前瞻

alert(str); // <a href='http://www.jb51.net/'>居居居居居居居居居</a > by 居居居居居居居居居

下一节讲一下,常用的正则表达式,整理总结~~~!!!!!楼主喝口水,这么点东西写了快一天。。。

时间: 2024-10-26 14:51:30

javascript高级程序设计(第三版)学习笔记(一) 正则表达式整理的相关文章

JavaScript高级程序设计 XML、Ajax 学习笔记_javascript技巧

第十五章 JavaScript与XML 1.浏览器对XML DOM的支持 1.1 DOM2级核心 ①在DOM2级在document.implementation中引入了createDocument()方法(IE6~8不支持). 可以创建一个空白XML. var xmldom = document.implemention.createDocument(namespaceUri,root,docype); ②要创建一个新的文档元素为<root>的XML文档,可用如下代码: var xmldom

JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))_javascript技巧

第一遍囫囵吞枣,不求甚解,感觉恍然大悟,结果晚上睡觉一想发现很多问题,什么都不明白,再看第二遍,发现原来是这样.过了几天一用,发现手写起来原来还是在凭记忆,于是下一遍,下一遍... 单凭记忆去弄清楚东西很不靠谱,时间一长脑袋空白.特别是技术上的很多思想和原理,只看不练,即便当时想得特别清楚,过久了也会忘.再者就是网上一些东西,只能说是提供了一种便捷的查看途径,事后还是自己总结为好,毕竟大多都是个人总结,一些概念很难讲的很清楚,而且两个人谈同一件事情,一般说的步骤和章节都是不同的,这样很容易形成交

Linux高级程序设计(第三版)入货,清明节假日有得消遣罗~~

当当前天订的,今天送到的. 快递哥哥送一件货一块五呀,大家都不容易~~ 清明节老婆回老家看望亲人, 俺就好好学一学吧.

JavaScript高级程序设计(第三版)学习笔记6、7章_javascript技巧

第6章面向对象的程序设计 对象 1.数据属性 configurable表示能否通过delete删除属性从而重新定义属性能否修改属性的特性或能否把属性修改为访问器属性默认为true enumerbale表示能否通过for-in访问属性默认true writable表示能否修改属性值默认true value数据存储位置默认undefined 修改默认属性特性Object.defineProperty()接收三个参数属性所在对象属性名描述符对象描述符对象属性必须是configurable.enumer

JavaScript高级程序设计(第3版)学习笔记6 初识js对象_基础知识

在房子里面可以放你想放的任意事物--如果你有足够的美学造诣,你甚至可以弄一个房中房试试--当然,为了方便管理,我们会给房子里存放的所有事物都会取上一个不重复的名字,比如医药房间里的各种药品名称.在ECMAScript中,你可以在对象中存放任意你想放的数据,同样,我们需要给存放的数据取一个名字--也就是对象的属性名,再存放各种数据.再看看ECMA-262中对象的定义:无序属性的集合,其属性可以包含简单数据类型值.对象或者函数. 进入对象,我开始有些激动了,说实话,让我想起做这系列学习笔记的最初原因

JavaScript高级程序设计(第3版)学习笔记 概述_基础知识

在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多,在我自己学习的过程中,曾经有过多次震撼,只是常常没有过多久,很多美轮美奂的用法就又模糊起来,希望通过对JavaScript高级程序设计(第3版)的专题学习笔记,能够较为系统的将基础知识梳理一次,也能够将自己平常学习与工作过程中遇到的一些美妙用法记录下来,便于自己再次学习,当然,也希望可以给有需要的朋友们一些力所能及的帮助. 相关术语 先简要说一下和JavaScript相关的一些背景术语,就不详细

JavaScript高级程序设计(第3版)学习笔记8 js函数(中)_基础知识

6.执行环境和作用域 (1)执行环境(execution context):所有的JavaScript代码都运行在一个执行环境中,当控制权转移至JavaScript的可执行代码时,就进入了一个执行环境.活动的执行环境从逻辑上形成了一个栈,全局执行环境永远是这个栈的栈底元素,栈顶元素就是当前正在运行的执行环境.每一个函数都有自己的执行环境,当执行流进入一个函数时,会将这个函数的执行环境压入栈顶,函数执行完之后再将这个执行环境弹出,控制权返回给之前的执行环境. (2)变量对象(variable ob

JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型_基础知识

ECMAScript是一种动态类型的语言,构建于5种简单数据类型(Undefined.Null.Boolean.Number.String)和一种复杂数据类型(Object)的基础之上.这篇文章就来复习一下简单数据类型,我会尽量从编程实践的角度来描述,下面代码运行环境为FireFox 14.0.1. 简单数据类型 简单数据类型 取值 Undefined undefined(只有一个值) Null null(只有一个值) Boolean true|false(只有两个值) Number 数值 St

JavaScript高级程序设计(第3版)学习笔记9 js函数(下)_基础知识

再接着看函数--具有魔幻色彩的对象. 9.作为值的函数 在一般的编程语言中,如果要将函数作为值来使用,需要使用类似函数指针或者代理的方式来实现,但是在ECMAScript中,函数是一种对象,拥有一般对象具有的所有特征,除了函数可以有自己的属性和方法外,还可以做为一个引用类型的值去使用,实际上我们前面的例子中已经有过将函数作为一个对象属性的值,又比如函数也可以作为另一个函数的参数或者返回值,异步处理中的回调函数就是一个典型的用法. 复制代码 代码如下: var name = 'linjisong'