正则表达式(RegExp)
如何按一定规则快速查找到需要找寻的内容，js的设计者们给我们提供了一个叫正则表达式(RegExp对象)，专门用于处理类似问题。
RegExp对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
正则表达式--基本概念
在计算机科学中，是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。在很多文本编辑器或其他工具里，正则表达式通常被用来检索或替换那些符合某个模式的文本内容。许多程序设计语言都支持利用正则表达式进行字符串操作。
特别强调：正则表达式不是js的专利产品，实际上很多程序设计语言都支持正则表达式进行字符串操作。
一个正则表达式，就是用某种模式去匹配一类字符串的一个公式。很多人因为它们看上去比较古怪而且复杂所以不敢去使用，不过，经过一点点练习之后，就觉得这些复杂的表达式其实写起来还是相当简单的，而且，一旦你弄懂它们，你就能把数小时辛苦而且易错的文本处理工作缩短在几分钟(甚至几秒钟)内完成。
快速入门案例
给你一个字符串(或一篇文章)，请你找出所有四个数字连在一起的子串？
代码如下：(IE9测试通过，Chrome未通过)
<!DOCTYPE html>
<htmL>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function test() {
var con = content.innerText;
var myReg = /(\d){4}/gi;//这是一个正则表达式对象，可以检索4个连续的数
//var myReg = new RegExp("(\\d){4}", "gi");
while(res = myReg.exec(con)) {//res是检索出来的结果，但是一个结果就对应一个数组，该数组的res[0]就是找到的那个文本
window.alert("找到"+res[0]);
}
}
</script>
</head>
<body>
<textarea id="content" rows="10" cols="20"></textarea>
<input type="button" onclick="test()" value="检索" />
</body>
</html>
exec()方法用于检索字符串中的正则表达式的匹配。
语法：RegExpObject.exec(string)
如果exec()找到了匹配的文本，则返回一个结果数组。否则，返回 null。此数组的第0个元素是与正则表达式相匹配的文本，第1个元素是与RegExpObject的第1个子表达式相匹配的文本（如果有的话），第2个元素是与RegExpObject的第2个子表达式相匹配的文本（如果有的话），以此类推。
小结：
创建一个RegExp对象有两种方法：
- var regExp=/正则表达式/gi; (隐式创建)
- var regExp=new RegExp(“正则表达式”,"gi"); (显示创建)
特别说明：g表示正则表达式执行全局匹配，i表示正则表达式不区分大小写的匹配，m表示多行模式(考虑换行)。
正则表达式对象
RegExp对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
创建RegExp对象有以下几种方法：
1、隐式创建RegExp对象
它的创建形式是/pattern/[flag]这种形式；说明：pattern是必需的，flag是可选择的。
pattern就是按照正则表达式的模式进行编写，flag是可以选择的，它主要有以下几种标识符：g全局标志、i忽略大小写、m用作多行标志。
2、显示的创建RegExp对象
它的创建形式是new RegExp("pattern"[,"flag"]); 说明：pattern是必需的，flag是可选择的。
pattern就是按照正则表达式的模式进行编写，flag是可以选择的，它主要有以下几种标识符：g全局标志、i忽略大小写、m用作多行标志。
例，
<!DOCTYPE html>
<htmL>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function test() {
var con = content.innerText;
var myReg = /abc/gi;
if(myReg.test(con)) {
alert("有abc");
} else {
alert("没有abc");
}
}
</script>
</head>
<body>
<textarea id="content" rows="10" cols="20"></textarea>
<input type="button" onclick="test()" value="检索" />
</body>
</html>
test()方法用于检测一个字符串是否匹配某个模式。
语法：RegExpObject.test(string)
如果字符串string中含有与RegExpObject匹配的文本，则返回true，否则返回false。
string对象与正则表达式有关的方法
常用的方法
①match()
语法格式为：match(reExp)
与RegExp对象的exec方法类似，它使用正则表达式模式对字符串执行搜索，并返回一个包含搜索结果的数组。
②search()
语法格式为：search(reExp)
它返回使用正则表达式搜索时，第一个匹配的字符串在整个被搜索的字符串中的位置。
③replace()
语法格式为：replace(reExp,replaceText)
使用正则表达式模式对字符串执行搜索，并对搜索到的内容用指定的字符替换，返回值为包含替换后的内容的字符串对象。
④split()
语法格式为：split(regExp)或split("按什么字符分割")
把字符串分割为字符串数组。
例，
<!DOCTYPE html>
<htmL>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var str="Visit W3School!"
window.alert(str.search(/W3School/));//6 function test() {
var con = content.innerText;
var myReg = /abc/gi;
res = con.match(myReg);
for (var i = 0; i < res.length; i++) {
window.alert(i+" "+res[0]);
}
} function test1() {
var con = content.innerText;
var myReg = /(\d){4}/gi;
//把四个数字换成 这里原来是四个数
//var newCon = con.replace("/(\\d){4}/", "这里原来是四个数");
var newCon = con.replace(myReg, "这里原来是四个数");
content.innerText = newCon;
} </script>
</head>
<body>
<textarea id="content" rows="10" cols="20"></textarea><br/>
<input type="button" onclick="test()" value="测试" />
<input type="button" onclick="test1()" value="替换" />
</body>
</html>
RegExp对象的属性
RegExp对象属性分为静态属性和实例属性，所谓静态属性是指：可以通过RegExp就可以访问。所谓实例属性是指：通过RegExp对象实例才能访问使用。
RegExp有哪些静态属性
①index：是当前表达式模式首次匹配内容的开始位置，从0开始计数，其初始值为-1，每次成功匹配时，index属性都会随之改变。
②lastIndex：是当前表达式模式首次匹配内容中最后一个字符的下一个位置，从0开始计数。
③input：返回当前所作用的字符串。
④leftContext：是当前表达式模式最后一个匹配字符串左边的所有内容。
⑤rightContext：是当前表达式模式最后一个匹配字符串右边的所有内容。
静态属性index/leftContext/rightContext的使用示例：
<!DOCTYPE html>
<htmL>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//index leftContext rightContext
function test() {
var con = content.innerText;
var myReg = /(\d){4}/gi;
while(res = myReg.exec(con)) {
window.alert("index = " + RegExp.index+" left = "+RegExp.leftContext
+" right = "+RegExp.rightContext);
}
}
</script>
</head>
<body>
<textarea id="content" rows="10" cols="20"></textarea><br/>
<input type="button" onclick="test()" value="测试" />
</body>
</html>
特别注意：RegExp静态属性的使用方式为：RegExp.属性名
正则表达式的语法--子表达式、捕获、反向引用
子表达式、捕获、反向引用
如果你认为正则表达式只能检索固定的字符串或是连续的几个数字，那你就太小看正则表达了。
案例：给你一个字符串(或一篇文章)，请你找出所有四个数字连在一起的子串，并且这四个数字要满足1、第一位与第四位相同；2、第二位与第三位相同，比如1221，5775，...
代码如下：
<!DOCTYPE html>
<htmL>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function test() {
var con = content.innerText;
var myReg = /(\d)(\d)\2\1/gi;//()包起来为子表达式，\2反向引用第二个子表达式，\1反向引用第一个子表达式
while(res = myReg.exec(con)) {
window.alert(res[0]);
}
}
</script>
</head>
<body>
<textarea id="content" rows="10" cols="20"></textarea><br/>
<input type="button" onclick="test()" value="测试" />
</body>
</html>
图示：
案例:查找aabbccdd格式的数字
代码如下：
<!DOCTYPE html>
<htmL>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function test() {
var con = content.innerText;
var myReg = /(\d)\1(\d)\2(\d)\3(\d)\4/gi;
while(res = myReg.exec(con)) {
window.alert(res[0]);
}
}
</script>
</head>
<body>
<textarea id="content" rows="10" cols="20"></textarea><br/>
<input type="button" onclick="test()" value="测试" />
</body>
</html>
案例：找出abbba规则的数字
<!DOCTYPE html>
<htmL>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function test() {
var con = content.innerText;
var myReg = /(\d)(\d)\2\2\1/gi;
while(res = myReg.exec(con)) {
window.alert(res[0]);
}
}
</script>
</head>
<body>
<textarea id="content" rows="10" cols="20"></textarea><br/>
<input type="button" onclick="test()" value="测试" />
</body>
</html>
案例：12321-444999111前5个任意数字后9个数要按规则来写
<!DOCTYPE html>
<htmL>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function test() {
var con = content.innerText;
var myReg = /(\d){5}-(\d)\2\2(\d)\3\3(\d)\4\4/gi;
while(res = myReg.exec(con)) {
window.alert(res[0]);
}
}
</script>
</head>
<body>
<textarea id="content" rows="10" cols="20"></textarea><br/>
<input type="button" onclick="test()" value="测试" />
</body>
</html>
正则表达式的语法--元字符详解
元字符
如果要想灵活的运用正则表达式，必需了解其中各种元字符的功能，元字符从功能上大致分为：
- 限定符
- 选择匹配符
- 分组组后和反向引用符
- 特殊字符
- 字符匹配符
- 定位符
元字符--限定符
用于指定其前面的字符和组合项连续出现多少次。
{n}说明：n表示出现的次数。比如a{3},1{4},(\d){2}。
但是这里要注意一点，1{3}去匹配1111111的话，会是到什么结果呢?答案是：111 111。
{n,m}说明：表示至少出现n次最多m次。比如a{3,4},1{4,5},(\d){2,5}。
我们看看1{3,4}去匹配1111111的话，会得到什么结果呢?答案是：1111 111。
js在默认匹配中使用的是贪婪匹配的原则，即尽可能匹配多的字符串。
+说明：+表示出现1次到任意多次。比如/a+/gi,/1+/gi,/(\d)+/gi。
看看/1+/gi去匹配1111111的话会得到什么结果呢?答案是：1111111。
*说明：*表示出现0次到任意多次。比如/a*/gi,/1*/gi,/(\d)*/gi。
看看/a1*/gi去匹配a111的话会得到什么结果呢?答案是：a111。
?说明：?表示出现0次到1次。比如/a?/gi,/1?/gi,/(\d)?/gi。
看看/a1?/gi去匹配a111的话会得到什么结果呢？a1。
元字符--字符匹配符
[a-z]说明：[a-z]表示可以匹配a-z中任意一个字符。比如：/[a-z]/gi,/[a-z]{2}/gi。
看看/[a-z]/gi去匹配allc8会得到什么结果?答案是：a l l c。
[A-Z]表示可以匹配A-Z中任意一个字符。
[0-9]表示可以匹配0-9中任意一个字符。
[^a-z]说明：[^a-z]表示可以匹配不是a-z中的任意一个字符。比如/[^a-z]/gi,/[^a-z]{2}/gi。
看看/[a-z]/gi去匹配allc8会得到什么结果?答案是：a l l c；用/[^a-z]{2}/gi又会得到什么结果?答案是得不到任何结果；用/[^a-z]/gi又会得到什么结果?答案是：8。
[^A-Z]表示可以匹配不是A-Z中任意一个字符。
[^0-9]表示可以匹配不是0-9中任意一个字符。
[abcd]表示可以匹配abcd中的任意一个字符。
[^abcd]表示可以匹配不是abcd中的任意一个字符。 当然上面的abcd你可以根据实际情况修改，以适应你的需求。
| \d | 表示可以匹配0-9的任意一个数字，相当于[0-9] |
| \D | 表示可以匹配不是0-9中的任意一个数字，相当于[^0-9] |
| \w | 表示匹配任意英文字符、数字、下划线，相当于[a-zA-Z0-9_] |
| \W | 相当于[^a-zA-Z0-9_]，与\w刚好相反 |
| \s | 表示匹配任何空白字符(空格、制表符等) |
| \S | 表示匹配任何非空白字符，和\S刚好相反 |
| . | 表示匹配除\n之外的所有字符，如果要匹配本身则需要使用\. |
思考题：写一个正则表达式可以匹配任意三个连续的字符。
/([\d\D])\1{2}/gi;
元字符--特殊字符匹配
在字符中，可能你会遇到比较特殊的字符，针对这种情况，正则表达式通过\xn的方式来匹配\xn的x是固定的，n是一个十六进制的数，比如\x21就是去匹配ascii码表中十六进制是21的字符，查表可知就是!。
元字符--定位符
定位符用于规定要匹配的字符串出现的位置，比如在字符串的开始还是在结束的位置，这个也是相当有用的，必须掌握。
^符号说明：匹配目标字符串的开始位置。
比如/^han/gi去匹配"hanshunping han han"，看看会得到什么结果?答案是：han。(在开始处出现匹配的字符串才会得到值)。
$符号说明：匹配目标字符串的结束位置。
比如/han$/gi去匹配"hanshunping han han"，看看会得到什么结果?答案是：han。(在结尾处出现匹配的字符串才会得到值)。
\b符号说明：匹配目标字符串的边界。
这个字符串的边界，有点不好理解，举例说明：
比如/han\b/gi去匹配"hanshunping sphan nnhan"，我们会匹配到"hanshunping sphan nnhan"，所以这里说的字符串的边界指的是子串间有空格，或者是目标字符串的结束位置，特别注意：没有目标字符串的开始位置。
\B符号说明：匹配目标字符串的非边界。
这个和\b含义刚刚相反，不再赘述。看案例：
比如/han\B/gi去匹配"hanshunping sphan nnhan"，会匹配到"hanshunping sphan nnhan"。
特别说明：\B和\b用到的特别少，而且我也懵逼了，干脆不用！
元字符--转义符号\
\符号说明：在我们使用正则表达式去检索某些特殊字符的时候，需要用到转义符号，否则检索不到结果，甚至会报错。
案例：
用/(/gi去匹配"abc$("会怎样?答案是报错。
需要用到转义符号的字符有以下：
. * + ( ) $ / \ ? [ ] ^ { }
元字符--选择匹配符
有时候，在匹配某个字符串的时候是选择性的，即：既可以匹配这个，又可以匹配那个，这时需要用到选择匹配符号|。
选择匹配符号还是比较好理解的，案例说明：
用/(han|韩)/gi去匹配"hanshunping 韩顺平"，会得到什么结果?答案是：han 韩。
案例：给你一个字符串，请你验证该字符串是否是一个电子邮件？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function test() {
var con = content.innerText;
var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
if(myReg.test(con)) {
window.alert("是邮件");
} else {
window.alert("不是邮件");
}
}
</script>
</head>
<body>
<textarea id="content" rows="10" cols="20"></textarea>
<input type="button" onclick="test()" value="检索" />
</body>
</html>
一个极极极简单的二代身份证验证案例。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二代身份证验证</title>
<script type="text/javascript">
function idCard() {
//area为对象名，前面的数字为属性名，后面的字符串为属性值(搞的我认为是数组)
area = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古",
21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏",
33: "浙江", 34: "安微", 35: "福建", 36: "江西", 37: "山东",
41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西",
46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南",
54: "*", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏",
65: "*", 71: "*", 81: "香港", 82: "澳门", 91: "国外", };
var idInfo = idNumber.value;
//正则表达式，我已懵逼了
var idReg = /^[1-9]\d{5}[1-2](9|0)\d\d[0-1]\d[0-3]\d{4}(\d|x)$/;
//判断输入的ID长度和格式是否正确
if(!idReg.test(idInfo) || idInfo == "") {
alert("不能为空或输入有误!请核实后重新输入!");
} else {
//通过地区码判断ID号是否非法
var myArea = idInfo.substring(0, 2);
//只判断了开始的2位地区码省份，有兴趣的朋友可以添加市及县的判断
//对象名['属性名']访问该对象中的属性
if(area[parseInt(myArea)] == null) {
alert("非法二代身份证!");
return;
}
//取出性别
var mySex = idInfo.substring(16, 17);
//取出生日
var myDate = idInfo.substring(6, 14);
alert("身份证号码:"+idInfo+" 籍贯所在地:"+area[parseInt(myArea)]+
" 性别:"+(mySex%2 ? "男" : "女")+" 生日:"+myDate);
}
}
</script>
</head>
<body>
<input id="idNumber" type="text" />
<input type="button" value="二代身份证验证" onclick="idCard()" />
</body>
</html>