在理论基础篇之后呢,应该就对正则表达式有了一些了解.比如说如何去创建一个正则表达式以及其中的匹配规则等等.那么就开始正则表达式的实战吧!
建议把所有的实例在console窗口敲一遍.例子中展现的只是一部分,配合《正则表达式-理论基础篇》SF地址、原址使用效果更佳哦!

一个手机号码匹配的进化历程

实例代码依托于:RegExpObj.test(String)，其含义是测试正则表达式与指定字符串是否匹配。成功匹配返回true

第一阶段-字符直接量:匹配自身

先假设一个手机号码为13762571094.

• 最初形态

1
2
3
4
5
6

/13762571094/.test("13783281094");//false
/13762571094/.test("13762571094");//true

/13762571094/.test("ui13762571094dd");//true
//正则表达式在匹配时,只要输出匹配内容就返回true,不考虑前面的ui和后面的dd
//最后这种情况显然不是我们想要的.那么就进入下一阶段的实践吧.

第二阶段-锚点:指定匹配位置

• ^匹配起始位置

1
2
3

/^http:/.test("http://www.163.com");//true
/^http:/.test("ahttp://www.163.com");//false
/^http:/.test("//www.163.com");//false

• $匹配结尾位置

1
2
3
4

/.jpg$/.test("1.jpg");//true
/.jpg$/.test("1.jpg png");//false
/.jpg$/.test("1.png");//false
/.jpg$/.test("regexp.png");//false

• \b:匹配单词边界

1
2

/\bis\b/.test("this");//false
/\bis\b/.test("that is reg");//true

• 在了解锚点之后我们的正则就有了第一次进化

1
2
3
4
5
6
7
8

/^13762571094$/.test("13762571094");//true

/^13762571094$/.test("ui13762571094dd");//false
//此时这个程序就能正确识别头尾的字符了.下面我们看看
/^13762571094$/.test("13712345674");//false
/*在试过了多个号码后发现,这个正则只能识别这个标准的手机号码.
这显然不是我们想要的,而不是识别一个手机号码的格式.
在下一阶段我们将实现一个手机号码的匹配.*/

第三阶段-字符类:匹配一类字符中的一个

• [abc]:a或b或c。[0-9]:一个数字
• [^0-9]:非数字的一个字符。[a-z]:一个字母
• . :任一字符(换行符除外)

1
2
3
4
5
6

[0-9]/.test("123")//true
/[0-9]/.test("asd")//false
/[^0-9]/.test("asd")//true
/[a-z]/.test("asd")//true
/./.test("allen")//true
/./.test("12")//true

• 了解了字符类后,我们就可以进行**第二次进化(50%)**。此时就能匹配一个手机号码啦！

1
2
3
4

/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test("13762571094");//true
/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test("13712345678");//true
//是不是感觉代码太长了呢?[0-9]足足5个字符呢,为了省力,当然不会就这样算了.继续向下看吧

元字符-具有特殊意义的字符

其实我们已经在前面使用过它啦

• ^、$、\b。
• \d:[0-9]。\D:[^\d]
• \s:空白符。\S:[^\s]
• \w:[A-Za-z0-9_]。\W:[^\w]

1
2
3
4
5

/\d/.test("123");//true
/\d/.test("1dsf");//true
/\D/.test("1dsf");//true
/\D/.test("123");//false
//自己再多去实验一些例子吧

• 了解了元字符后我们就可以进行**第二次进化(100%)**了。

1
2
3
4

/^1\d\d\d\d\d\d\d\d\d\d$/.test("13762571094");//true
/^1\d\d\d\d\d\d\d\d\d\d$/.test("13712345678");//true
/^1\d\d\d\d\d\d\d\d\d\d$/.test("1376257109x");//false
//是不是感觉代码比刚刚短了很多了呢?但这还是不够,什么事情都阻止不了我想偷懒的心,继续学习吧.

第四阶段-量词:出现的次数

• {n,m}:n到m次。?：{0,1}
• +:{1,}。*:{0,}

1
2
3
4
5
6

/\d*/.test("abc");//true
/\d+/.test("abc");//false
/\d+/.test("1abc");//true
/^https?:/.test("http://www.163.com");//true
/^https?:/.test("//www.163.com");//true
/^https?:/.test("httpss://www.163.com");//false

• 此时我们的匹配手机号码的正则表达式就到了最后阶段了

1
2
3
4

/^1\d{10}$/.test("1376257109x");//false
/^1\d{10}$/.test("13762571094");//true
/^1\d{10}$/.test("13712345678");//true
//到这里手机号码就匹配完成了!

需要注意的点

• 这里匹配的情况是最简单的情况，并没有特别完美，比如限制开头第二位数字的范围：188，158通过，而123,191，不通过等等。
• 可利用多选分支，例如：/^1[3|5][0-9]{9}$|^18\d{9}$/。不过现在虚拟运营商的加入，号码段变多了，所以直接用最简单的方法，也没事。

邮箱的匹配

/thi(c|n)k/===thi[cn]k

\.(png|jpg|jpeg|gif)$:检测一个文件是不是图片文件.

多选分支:网易邮箱的匹配

元字符的问题

/^http:/\/\/../@163\.com$/

1
2
3
4
5

/http:\/\//.test("http://www.163.com");//true
/@163.com$/.test("abc@163.com");//true
/@163.com$/.test("abc@163acom");//true
/@163\.com$/.test("abc@163.com");//true
/@163\.com$/.test("abc@163acom");//false

使用多选分支。

1
2
3
4

/(\w+)@(163|126|188)\.com$/.test("guo啊圣诞节了@163acom")//false
/(\w+)@(163|126|188)\.com$/.test("guodong111@163acom")//false
/(\w+)@(163|126|188)\.com$/.test("guodong111@163.com")//true

分组-邮箱的匹配

这里需要思考几个问题.

1. 在@前能出现哪些东西？这里使用(\w+\.)*来匹配出现.的情况，表示出现0次或多次因为.后不能紧跟@，所以后面紧跟\w+匹配普通的字母数字情况。
2. @后出现的邮箱后缀并不固定所以使用\w+来匹配。
3. 最后考虑域名结尾的级联情况所以用(\.\w+)+

1
2
3
4

/^(\w+\.)*\w+@\w+(\.\w+)+$/.test("guo啊圣诞节了@163acom")//false
/^(\w+\.)*\w+@\w+(\.\w+)+$/.test("guodong111@163acom")//false
/^(\w+\.)*\w+@\w+(\.\w+)+$/.test("guodong111@163.com")//true
/^(\w+\.)*\w+@\w+(\.\w+)+$/.test("guodong111@yea.com.cn")//true

捕获

• 保存匹配到的字符串,日后再用
• ():捕获/(\w+)@(163|126|188)\.com$/
• (?:):不捕获/(\w+)@(?:163|126|188)\.com$/
• 使用:
• $1,$2,…
• api参数或返回值

获取匹配的字符串:String.match(regexp)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var url = 'http://blog.163.com/album?id=1#comment';
var reg = /^(https?:)\/\/([^\/]+)(\/[^\?]*)?(\?[^#]*)?(#.*)?$/;
// var reg = /^(https?:)\/\/([^\/]+)([^\?]*)([^#]*)(.*)$///与上面的正则效果相同.;

var arr = url.match(reg);

//arr[0]为原字符串."http://blog.163.com/album?id=1#comment"
//对应括号所匹配的字符
var protocol= arr[1]//"http:"
var host= arr[2]//"blog.163.com"
var pathname= arr[3]//"/album"
var search= arr[4]//"?id=1"
var hash= arr[5]//"#comment"

替换一个子串:str.replace(regexp/substr,replacement)

• 第二个参数是字符时

1
2
3
4
5
6

var str = "the price of tomato is 5, the price of apple is 10."
str.replace(/(\d+)/,"$1.00")
"the price of tomato is 5.00, the price of apple is 10."
//使用全局模式
str.replace(/(\d+)/g,"$1.00")
"the price of tomato is 5.00, the price of apple is 10.00."

• 第二个参数是函数时

1
2
3
4
5
6
7
8
9
10
11
12

var html = '<label>网址:</label><input placeholder="以http://起始">';
html = html.replace(/[<>]/g, function(m0){
	switch(m0){
		case '<':
			return '&lt;';
		case '>':
			return '&gt;';
	}
});
//处理后输出结果为：
console.log(html);//&lt;label&gt;网址:&lt;/label&gt;&lt;input placeholder="以http://起始"&gt;

更强大的检索 - regexpObj.exec(str)

• 更详尽的结果:index
• 过程的状态:lastIndex
• 一般用不到，就不详细说明了，有兴趣的自己去了解一下。

• 什么是正则表达式?
  可以称作规则一个描述字符模式的对象，正则表达式中的字母和数字，都是按照字面含义进行匹配的。强大的字符串匹配工具

• 如何建立一个正则表达式？

1. 使用RegExp()构造函数来创建RegExp对象
2. 特殊的直接量语法来创建，定义为包含在一对斜杠（/）之间的字符

例：var reg = /s$/; , var reg = new RegExp(s$);
两者效果完全相同，用来匹配所有以字母“s”结尾的字符串。

“文本模式”的正则表达式语法

1.直接量字符

非字母的字符匹配，这些字符需要通过反斜线（\）作前缀进行转义.

• 具有特殊含义的标点符号:

^, $, ., *, +, ?, =, !, :, |, \, /,(,),[,],{, }

想在正则表达式中使用这些字符的直接量进行匹配，则必须使用前缀”"，其他标点符号(比如@和引号)无特殊含义，在正则表达式中按照字面含义进行匹配。

2.字符类.

方括号,或,范围

将直接量字符单独放进方括号内就组成了字符类。一个字符类可以匹配它包含的任意字符。字符类可以使用连字符来表示字符范围。

• 例:
• /[a,b,c]/:表示和字母”a”,”b”,”c”中的任意一个都匹配
• /[a-z]/:匹配拉丁字母表中的小写字母
• /[/s/d]/:匹配任意空白符或数字

3. 重复

用以指定字符重复的标记

• 例:

• /\d{2,4}/:匹配2-4个数字。

• /\w{3}\d?/:精确匹配三个单词和一个可选的数字。

• /\s+java\s+/:匹配前后有1个或多个空格的字符串”java”

• /[^(]*/:匹配0个或多个非左括号的字符(这里实际上能与"("匹配)

• 在使用"*",和"?"时要注意,由于这些字符能匹配0个字符,因此它们允许什么都不匹配，例:

• /a*/能匹配字符串”bbbb”，因其含有0个a。

• 上表中列出的匹配字符为”贪婪的”匹配，它总是尽可能多地匹配,且允许后续的正则表达式继续匹配。

• 非贪婪匹配,只需在待匹配的字符后跟随一个问号即可,"?",+?,*?或{1,5}?。例:

• /a+/:匹配”aaa”时,三个字符都被匹配,

• /a+?/:匹配”aaa”时,因其尽可能少的匹配,只能匹配第一个a

4.选择-分组和引用

包括：指定选择项，自表达式分组，和引用前一子表达式的特殊字符

• 选择项的尝试匹配次序是从左到右，直到发现匹配项，若左边成功匹配就忽略右边的项。
• 正则表达式中圆括号的作用：

1. 把单独的项组成子表达式，以便于可以像处理独立单元一样，用\|,*,+或者?等等来对单元内的项进行处理
2. 在完整的模式中定义子模式
3. 允许在同一正则表达式的后部,引用前面的子表达式

• 例:
• /ab|cd|ef/:可以匹配”ab”,也可以匹配”cd”,还可以匹配”ef”.
• /\d{3}|[a-z]{4}/:可以匹配3个数字,或者4个小写字母.
• (/[a-z]+(\d+)/):匹配一个或多个小写字母后跟随了一位或多位数字,使用括号包裹后,可以从检索到的匹配中抽取数字了.

5.指定匹配位置

我们称这些元素为正则表达式的锚,它们将模式定位在搜索字符串的特定位置上.

• 例:
• /^JavaScript$/:匹配”JavaScript”单词
• /\B[Ss]cript/:与”JavaScript”和”/postscript”匹配,但不与”script”与”Script”.

6.修饰符

说明高级匹配的规则,放在”/“符号之外,第二条斜线后

• 例:
• /java$/im:可以匹配”java”也可以匹配”Java\nis fun”

用于模式匹配的string方法

正则表达式的作用就是用来解析字符串

1. search():

• 查找字符串,接受一个参数为正则表达式,返回返回一个与之匹配的子串的起始位置,若未找到返回-1.
• 例: JavaScript.search(/script/i);//返回4
• search()方法不支持全局属性检索,所以会忽略修饰符g

2. replace():

• 用以执行检索与替换操作,接受两个参数,第一个参数是一个正则,第二个是要进行替换的字符串
• 若第一个参数是字符串,replace()则会直接搜索这个字符串
• 若替换字符串中出现了**$加数字**,那么replace()将用与指定的子表达式相匹配的文本来替换这两个字符.

例:

1
2
3
4
5
6
7

text.replace(/javascript/gi,"JavaScript");//将所有不区分大小写的javascript都替换成,大小写正确的JavaScript.

//一段引用文本起始于引号,结束与引号.
//中间的内容区域,不能包含引号
var quote = /"([^"]*)"/g;
//引用中文半角引号替换英文引号,同时要保持引号之间的内容(储存在$1中)没有被修改.
text.replace(quote,'“$1”');

3. match()

• 接受唯一一个参数,就是正则表达式,返回的是一个由匹配结果组成的数组.例:
• "1 plus 2 equals 3".match(/\d+/g);//返回["1","2","3"]
• 若在这个正则表达式中没有设置修饰符g,match()就不会进行全局检索,它只检索第一个匹配。但即使match()执行的不是全局检索，它也返回一个数组。在这种情况下，数组的第一个元素就是匹配的字符串，余下的元素则是正则表达式中用圆括号括起来的子表达式。
• 因此，如果macth()返回一个数组a，那么a[0]存放的是完整的匹配，a[1]存放的是与第一个圆括号括起来的表达式相匹配的子串，以此类推。为了和方法replace()保持以后，a[n]存放的是$n的内容。
• 例:解析一个url

1
2
3
4
5
6
7
8
9
10
11

var url = /(\w+):\/\/([\w.]+)\/(\S*)/;
var text = "Visit my blog at http://www.example.com/~david";

var result = text.match(url);

if (result != null) {
    var fullurl = result[0]; //包含 "http://www.example.com/"
    var protocol = result[1]; //包含 "http"
    var host = result[2]; //包含 "www.example.com"
    var path = result[3]; //包含~david
}

4. split()

• 用以将调用它的字符串拆分为子串组成的数组,使用分隔符是split()的参数
• 参数为字符串
• "123,456,789".split(",");//返回["123","456","789"]
• 参数为正则
• "1,2, 3,4 ,5".split(/\s*,\s*/)//返回["1","2"," 3","4 ","5"]
• 指定分隔符”,”,允许两边可以留有任意多的空白符

RegExp对象

• RegExp对象用以创建新的RegExp对象,可接受两个参数,第二个可选.
• RegExp对象的第一个参数为正则表达式的主体部分,也就是/...../之间的文本,无论是字符串直接量,还是正则表达式都使用”"作为转义字符的前缀.
• 第二个可选参数为指定正则表达式的修饰符,i,g,m或者他们的组合.参考:文本模式的则表达式-修饰符
  例:

1
2
3

var reg = new RegExp("\\d{5}","g");//匹配全局模式下的5个数字
alert(reg.test("1J2a35786"));//true
alert(reg.test("1J2a356"));//false

RegExp属性

类型系统

关于 JS 类型的几点说明

• JavaScript 是动态类型 ＋ 弱类型的语言
• JavaScript 的变量。属性在运行期决定类型
• JavaScript 存在隐式类型转换
• JavaScript 有一系列识别类型的反射方法

javascript 类型系统可以分为标准类型和对象类型，进一步标准类型又可以分为原始类型和引用类型，而对象类型又可以分为内置对象类型、普通对象类型、自定义对象类型。

.

类型转化表

类型判断

• typeof
• Object.prototype.toString
• constructor
• instanceof

typeof

1. 可以识别标准类型(null除外)
2. 不可识别具体的对象类型(Function除外)

例:

1
2
3
4
5
6
7
8
9
10
11

//1. 可以识别标准类型(`null`除外)
typeof(1);//"number"
typeof("");//"string"
typeof(undefined);//"undefined"
typeof(true);//"boolean"
typeof(null);//"object"

//2. 不可识别具体的对象类型(`Function`除外)
typeof([]);//"object"
typeof({});//"object"
typeof(function(){});//"function"

instanceof

1. 能够判别内置对象类型
2. 不能判别原始类型
3. 能够判别自定义类型

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//1. 能够判别内置对象类型
[] instanceof Array;//true
/\d/ instanceof RegExp;//true

//2. 不能判别原始类型
1 instanceof Number;//false
"xiaohong" instanceof String;//false

//3. 能够判别自定义类型
function Point(x, y) {
	this.x = x;
	this.y = y;
}
var c = new Point(2,3);

c instanceof Point;//true

Object.prototype.toString.call()方法

1. 可以识别标准类型,及内置对象类型
2. 不能识别自定义类型

例:

1
2
3
4
5
6
7
8
9
10
11
12
13

//1. 可以识别标准类型,及内置对象类型
Object.prototype.toString.call(21);//"[object Number]"
Object.prototype.toString.call([]);//"[object Array]"
Object.prototype.toString.call(/[A-Z]/);//"[object RegExp]"

//2. 不能识别自定义类型
function Point(x, y) {
	this.x = x;
	this.y = y;
}

var c = new Point(2,3);//c instanceof Point;//true
Object.prototype.toString.call(c);//"[object Object]"

• 为了方便使用,使用函数封装如下:

  1 2 3 4 5 6

  function typeProto(obj) { return Object.prototype.toString.call(obj).slice(8,-1); } typeProto("guo");//"String" typeProto({});//"Object"

constructor

constructor指向构造这个对象的构造函数本身..

1. 可识别原始类型
2. 可识别内置对象类型
3. 可识别自定义类型

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//1. 可识别原始类型
"guo".constructor === String;//true
(1).constructor === Number;//true
true.constructor === Boolean;//true
({}).constructor === Object;//true

//2. 可识别内置对象类型
new Date().constructor === Date;//true
[].constructor === Array;//true

//3. 可识别自定义类型
function People(x, y) {
	this.x = x;
	this.y = y;
}
var c = new People(2,3);
c.constructor===People;//true

• 为了方便使用,使用函数封装如下:

1
2
3
4
5
6
7
8

function getConstructorName(obj){
	return obj && obj.constructor && obj.constructor.toString().match(/function\s*([^(]*)/)[1];
}

getConstructorName(new Date());//"Date"
getConstructorName(null);//null
getConstructorName(12);//"Number"

类型判断对比表

• 其中红色的单元格表示该判断方式不支持的类型。

Youth -Samuel Ullman

Samuel Ullman（塞缪尔.厄尔曼）

Youth is not a time of life,it is a state of mind;
青春不是年华，而是心境；

it is not a matter of rosy cheeks, red lips and supple knees;
青春不是桃面、丹唇、柔膝，

it is a matter of the will, a quality of the imagination, a vigor of the emotions;
而是深沉的意志、宏伟的想象、炽热的感情；

it is the freshness of the deep springs of life.
青春是生命的深泉在涌流。

Youth means a tempera mental predominance of courage over timidity,
青春气贯长虹，勇锐盖过怯弱，

of the appetite for adventure over the love of ease.
进取压倒苟安，如此锐气，

This often exists in a man of 60 more than a boy of 20.
二十后生有之,六旬男子则更多见.

Nobody grows old merely by a number of years. We grow old by deserting our ideals.
年年有加，并非垂老；理想丢弃，方堕暮年。

Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul.
岁月悠悠，衰微只及肌肤；热忱抛却，颓唐必至灵魂。

Worry, fear, self-distrust bows the heart and turns the spring back to dust.
烦忧、惶恐、丧失自信，定使心灵扭曲，意气如灰。

Whether 60 or 16, there is in every human being`s heart the lure of wonder,
无论年届花甲，抑或二八芳龄，心中皆有生命之欢乐，奇迹之诱惑，

the unfailing childlike appetite of what`s next and the joy of the game of living.
孩童般天真久盛不衰。

In the center of your heart and my heart there is a wireless station,
人人心中皆有一台天线，

so long as it receives messages of beauty, hope, cheer, courage and power from men and from the Infinite,
只要你从天上人间接受美好、希望、欢乐、勇气和力量的信号，

so long are you young.
你就青春永驻，风华常存。

When the aerials are down, and your spirit is covered with snows of cynicism and the ice of pessimism,
一旦天线倒塌，锐气被冰雪覆盖，玩世不恭、自暴自弃油然而生，

then you are grown old, even at 20,
即使年芳二十,实已垂老矣;

but as long as your aerials are up,to catch waves of optimism, there is hope you may die young at 80.
然则只要竖起天线，捕捉乐观的信号，你就有望在八十岁高龄告别尘寰时仍觉得年轻。