JavaScript学习小结(7)之JS RegExp_javascript技巧
- WBOY原创
- 2016-05-16 15:29:101123浏览
在js中,正则表达式是由一个RegExp对象表示的，RegExp 是正则表达式的缩写。RegExp简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。可以使用一个RegExp()构造函数来创建RegExp对象，也可以使用直接量语法。
1、RegExp简介。
RegExp即正则表达式（Regular Expression，在代码中常简写为regex、regexp或RE/re/reg），就是使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式，搜索模式可用于文本搜索和文本替换。
正则表达式是由一个字符序列形成的搜索模式，当你在文本中搜索数据是，你可以用搜索模式来描述你要查询的内容，也就是说正则表达式是描述字符模式的对象，可用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
所谓正则表达式，直接可理解为规则或者模式表达式，就是表达了某一种计算机可以理解的规则，而一般人很难读懂的文字表达方式，可用于所有文本搜索和文本替换的操作，简单说就是处理字符串。
2、字符串方法。
(1)、charAt() 获取某个字符，返回字符串某一位的字符。
(2)、split() 分割字符串，获得数组。
(3)、search() 查找某个字符首次出现的位置，配合正则使用更好，返回值为数值，没找到返回-1。
(4)、match() 查找字符串中指定字符并返回该字符，如果不使用正则，则只返回首次出现的指定字符，不会再向后匹配，如果使用正则并进行全局匹配，则以数组形式返回字符串中所有指定的字符，没找到则返回null。
(5)、replace() 替换字符，返回一个新字符串，配合正则使用更好，可以替换所有匹配。
<script>
var str='abcdefgca';
//返回字符串中某一位的字符。
alert(str.charAt()); //返回：d
//查找字符串首次出现的位置。
alert(str.search('z')); //返回：-
//查找指定的字符。
//只返回第一次出现的c，不再向后匹配。
alert(str.match('c')); //返回：c
//将'a'替换为'i'。
//只替换了第一个位置的a，不再向后匹配。
alert(str.replace('a', 'i')); //返回：ibcdefgca
//分割字符串。
var str='--aaa--cd';
var arr=str.split('-'); //返回：,,aaa,,cd
alert(arr);
</script>
实例：使用普通方法找出字符串中所有数字
实现思路：要找出字符串中的数字，其实也不难，使用判断先将字符串中的数字提取出来，那么字符串中肯定不止一个数字，所以就需要一个空字符串来存储提取出来的数字字符，然后再将这些数字字符添加到数组中，最后返回，这样就完成了。来看看程序是怎么实现的：
<script>
var str=' abc d aa c zz -=-=s-';
var arr=[];
var num='';
//首先循环遍历字符串
for(var i=;i<str.length;i++){
//再判断当前字符大于等于并且小于等于，则为数字
if(str.charAt(i)>='' && str.charAt(i)<=''){
//那么就将当前的字符存储在空字符串中
num += str.charAt(i);
}
else{
//如果字符串中有值。
if(num){
//将值添加到数组中。
arr.push(num);
//再清空字符串，避免重复添加。
num='';
}
}
}
//最后在整个字符串结束之后有可能还会有数字，再做一次判断。
if(num){
//如果还有值就添加到数组中。
arr.push(num);
//再清空字符串。
num='';
}
//返回：OK，现在返回就完成了。
alert(arr); //返回：,,,,,,,
</script>
虽然可以使用普通方法完成，结构清晰，但是代码相对较长，如果使用正则，那么一个表达式就完成了这么多工作，非常方便，下面就来看看怎么使用正则。
3、使用正则。
正则表达式语法：var re = new RegExp('模式', '修饰符');
模式就是表达式的模式，而修饰符是用于指定全局匹配、不区分大小写等，完整形态就是正则表达式。
看到正则语法长这模样，不就是JS中典型的新创建对象的语法么，对了，就是新创建一个正则对象。我们都知道，要尽量避免使用new关键词，使用new无疑就是新创建了一个对象，那么同时就预示着其占据了一定的内存空间，如果处理不当，积累多了会造成内存溢出，这样相当耗费资源，不利于代码优化的实现。同时这样的写法，体现不出正则的强大，他应该是很简a洁的才对，因此在实际使用的时候都不采用这种JS风格的正则语法，都使用的是另一种风格，如下：
语法：var re = /模式/修饰符;
这种风格就相对简洁了，属于一般人看不懂的表达方式。
(1)、修饰符。
修饰符用于执行全局匹配和区分大小写。
忽略大小写：i (ignore的简写，中文翻译为：忽视)
全局匹配：g (global的简写，中文翻译为：全部的/全局的)
实例：全局搜索指定字符
<script>
var str='AbCdEFgiX';
//JS风格：
//这个正则表达式什么也不代表，只代表abc本身。
var reg=new RegExp('abc', 'i');
alert(str.match(reg)); //返回：AbC
//常用风格：
var re=/efg/i;
alert(str.match(re)); //返回：EFg
</script>
4、方括号和元字符。
(1)、方括号。
方括号用于查找某个范围内的字符。
①、任意字符
表达式：[abc]
查找方括号中的任意字符。
[]在这里为或的意思，即随便出现哪个都行。
<script> var str='apc xpc ppc bpc spc opc'; //[apx]pc，随便出现哪个都行，即：apc ppc xpc var re=/[apx]pc/g; alert(str.match(re)); //返回前个pc。 </script>
②、范围查找。
表达式：[0-9] [a-z] [A-z] [A-Z]
[0-9] 查找任意 0 - 9 的数字。
[a-z] 查找任意 a - z 的字符。
[A-z] 查找任意 大写A - 小写z 的字符。
[A-Z] 查找任意 大写A - 大写Z的字符。
③、排除查找。
表达式：[^abc] [^a-z] [^0-9]
[^abc] 查找任意不在方括号中的字符。
[^a-z] 查找任意除了字母以外的字符，包括数字符号中文外文。
[^0-9] 查找任意除了数字以外的字符，包括字母符号中文外文。
<script> var str='ot out o.t o t o`t ot ot'; //o和t中间除了数字，什么都可以 var re=/o[^-]t/g; alert(str.match(re)); //返回：out,o.t,o t,o`t </script>
④、选择查找。
表达式：(a|b|c)
查找任何指定的选项，a或b或c。
⑤、匹配还可以使用组合模式，比如：[a-z0-9A-Z] [^a-z0-9]
[a-z0-9A-Z] 任意大小写字母和数字。
[^a-z0-9] 除了字母和数字以外，什么都可以。
(2)、元字符。
元字符是拥有特殊含义的字符，也可以叫做转义字符。
下面是一些常用的元字符：
| 元字符 | 描述 | 使用 |
| . | 查找单个字符，代表任意字符，不包括换行和行结束符。 | 不建议使用，容易出问题。 |
| \w | 查找单词字符，包括英文数字下划线，相当于[a-z0-9] | /\w/ |
| \W | 查找非单词字符，相当于[^a-z0-9] | /\W/ |
| \d | 查找数字，相当于[0-9] | /\d/ |
| \D | 查找非数字，相当于[^0-9] | /\D/ |
| \s | 查找空白字符，包括空格符、回车符、制表符、换行符和换页符，不可显示不可打印的字符。 | /\s/ |
| \S | 查找非空白字符。 | /\S/ |
| \b | 查找位于单词的开头或结尾的匹配，如果未匹配到，则返回null。 | /\b/ |
| \B |
查找非单词边界的匹配，也就是不位于开头或结尾，匹配位置的上一个和下一个字符的类型是相同的：即必须同为单词， 或必须同为非单词，字符串的开头和结尾处被视为非单词字符，如果未匹配到，则返回null。 |
/\B/ |
| \n | 查找换行符，如果找到则返回该位置，如果未找到则返回-1。 | /\n/ |
| \f | 查找换页符。 | /\f/ |
| \r | 查找回车符。 | /\r/ |
| \t | 查找制表符。 |
5、量词。
所谓量词，就是数量词，即个数，用在正则中，表示出现的次数。
下面是一些常用的量词：
| 量词 | 描述 | 使用 |
| * | 零次或任意次，相当于{0,} | 不推荐使用，范围太广，不够精确。 |
| ? | 零次或一次，相当于{0, 1} | /10?/g 对1进行全局搜索，包括其后紧跟的零个或1个'0'。 |
| + | 一次或任意次，相当于{1, } | /w+/g 对至少一个单词进行全局搜索。 |
| {n} | 正好n次 | /d{4}/g 对包含四位数的数字进行全局搜索。 |
| {n,} | 至少n次，最多不限 | /d{3,}/g 对包含至少三位数的数字进行全局搜索。 |
| {n, m} | 至少n次，最多m次 | /d{3,4}/g 对包含三位或四位的数字进行全局搜索。 |
下面是一些常用的匹配模式：
| 模式 | 描述 | 使用 |
| ^a | 任何开头为 a 的字符，表示行首 | /^\d/ 以数字开头 /^a/g 全局搜索以'a'开头的字符 |
| a$ | 任何结尾为 a 的字符，表示行尾 | /\d$/ 以数字结尾 /z$/g 全局搜索以'z'结尾的字符 |
| ?=a | 任何其后紧跟 a 的字符 | /a(?= b)/g 全局搜索'a'后紧跟'b'的字符 |
| ?!a | 任何其后没有紧跟 a 的字符 | /c(?= d)/g 全局搜索'c'后没有紧跟'd'的字符 |
6、字符串和正则配合。
(1)、search()配合正则
实例：找出字符串中第一次出现数字的位置
<script> var str='asdf zxcvbnm'; //元字符d，表示转义为数字 var re=/\d/; alert(str.search(re)); //返回： 第一个数字为出现在第位 </script>
(2)、match()配合正则
其实没有什么东西是非正则不可的，只是正则可以让做东西更方便。下面就完成本章遗留的历史问题，怎么使用正则，能一句代码就完成普通方法需要很多行代码才能完成的东西。
在实例之前，先看看match()与正则的配合。
<script> var str='asdf zxcvm'; //找出字符串中的数字可以使用元字符\d var re=/\d/; //没告诉系统要找多少数字，系统在找到数字后就返回 alert(str.match(re)); //返回： //因此需要全局匹配，使用修饰符g var re=/\d/g; //没告诉系统要找几位，系统会将所有找到的数字返回 alert(str.match(re)); //返回：,,,,,,,,,,,, //所以可以使用两个元字符，告诉系统要找的数字是位 var re=/\d\d/g; //显然这样是不可取的，因为数字的位数并不固定，可能是位，有可能还是多位 alert(str.match(re)); //返回：,,,, //所以需要用到量词+，+代表若干,也就是多少都可以。 var re=/\d+/g; //现在返回正确。 alert(str.match(re)); //返回：,,,, </script>
实例：使用正则找出字符串中所有数字
<script> var str=' abc d aa c zz -=-=s-'; //alert(str.match(/\d+/g)); //元字符d也可以使用[-]代替，到随便哪个都行。 alert(str.match(/[-]+/g)); //返回：,,,,,,, </script>
正则是强大的字符串匹配工具，就这样简单的使用一句代码就完成了。
(3)、replace()配合正则
<script>
var str='abc zaaz deaxcaa';
//将字符串中的a替换为数字
alert(str.replace('a', )); //仅仅只将第一个a替换为
//配合正则使用匹配所有a再替换
var re=/a/g;
alert(str.replace(re, '')); //返回所有的a都为
</script>
实例：简单的敏感词过滤
所谓的敏感词，就是法律不允许的词语，一切非法词都可以叫做敏感词，这包括的范围就太广了，比如危害国家安全，反对宪法确立的基本原则，散步谣言，扰乱民心，扰乱社会秩序，破坏社会稳定，色情、暴力、赌博、虚假、侵害、骚扰、粗俗、猥亵或其他道德上令人反感的词，以及含有法律规定或禁止的其他内容的词语。在平时最常见也是大多数人都会用的词莫属道德上令人反感的词了，说斯文一点就是吵架时用于攻击别人的词语。这里就列举几个热门的网络词语作为例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript实例</title>
<script>
window.onload=function (){
var oBtn=document.getElementById('btn');
var oTxt=document.getElementById('txt');
var oTxt=document.getElementById('txt');
oBtn.onclick=function (){
//这里的|在正则中表示 或 的意思
var re=/元芳|萌萌哒|然并卵|毛线|二货|城会玩/g;
//文本框的值等于文本框的值过滤掉敏感词
oTxt.value=oTxt.value.replace(re,'***');
};
};
</script>
</head>
<body>
<textarea id="txt" rows="" cols=""></textarea><br>
<input id="btn" type="button" value="过滤"><br>
<textarea id="txt" rows="" cols=""></textarea>
</body>
</html>
可在第一个文本框中输入一些相关语句，点击过滤按钮，查看过滤后的效果。
此外，支持正则表达式的 String 对象的方法还包括 split() 方法，可把字符串分割为字符串数组。
7、RegExp对象方法。
在JS中，RegExp对象是一个预定义了属性和方法的正则表达式对象。
(1)、test()
test() 方法用于检测一个字符串是否匹配某个模式，也就是检测指定字符串是否含有某个子串，如果字符串中含有匹配的文本，返回 true，否则返回 false。
语法：RegExpObject.test(str)
调用 RegExp 对象 re 的 test() 方法，并为它传递字符串str，与这个表示式是等价的：(re.exec(str) != null)。
实例：搜索字符串是否含有指定的字符
<script> var str='The best things in life are free, like hugs, smiles, friends, kisses, family, love and good memories.'; var re=/i/; alert(re.test(str)); //返回：true var reg=/z/; alert(reg.test(str)); //返回：false //上面的代码可以不用定义正则的变量，直接使用，将两行合并为一行。 alert(/i/.test(str)); alert(/z/.test(str)); </script>
(2)、exec()
exec() 方法用于检索字符串中的正则表达式的匹配，提取指定字符串中符合要求的子串，该方法返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回 null。可以使用循环提取所有或者指定index的数据。
语法：RegExpObject.exec(str)
exec() 方法的功能非常强大，它是一个通用的方法，可以说是test() 方法的升级版，因为他不仅可以检测，而且检测到了可以直接提取结果。该方法使用起来比 test() 方法以及支持正则表达式的 String 对象的方法更为复杂。
<script> var str = 'good good study day day up'; var re = /good/; var arr = re.exec(str); console.log(arr); //控制台显示：["good"]点开后显示： "good"，index ，input "good good study day day up"。 console.log(arr.index); //控制台显示： console.log(arr.input); //控制台显示：good good study day day up </script>
通过上面的实例，可以看到，如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推。
除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看出，在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用方法 String.match() 返回的数组是相同的。
什么是"与子表达式相匹配的文本"？
所谓的子表达式就是正则表达式中包含在圆括号中的内容。看下面实例：
<script> var str = 'good good study day day up'; var re = /g(o+)d/; var arr = re.exec(str); console.log(arr); //显示：["good", "oo"]点开后显示： "good", "oo", index ，input: "good good study day day up" console.log(arr.length); //显示： var reg = /(o+)/; //var reg = /o+/; 只返回一个"oo"，长度为 var arr = reg.exec(str); console.log(arr); //显示：["oo", "oo"]点开后显示： "oo", "oo", index ，input: "good good study day day up" console.log(arr.length); //显示： </script>
通过上例，可以看到，子表达式是一个大的表达式的一部分，并且必须用()包含起来。一个表达式可使用多个子表达式，同时还支持多层嵌套，把一个表达式划分为多个子表达式的目的是为了把那些子表达式当作一个独立的元素来使用。也就是说表达式中的子表达式可以作为整个表达式返回，也可以作为一个单独的表达式返回。所以上面的数组长度为 2。
使用子表达式是为了提取匹配的子字符串，表达式中有几个()就有几个相应的匹配字符串，顺序会依照()出现的顺序依次进行，并且()中可以使用 或"|" 进行多个选择。也就是说可以使用()对字符进行分组，并保存匹配的文本。
如果该方法使用全局匹配，则找到第一个指定字符，并存储其位置，如果再次运行 exec()，则从存储的位置（lastIndex）开始检索，并找到下一个指定字符，存储其位置。lastIndex属性是RegExp对象属性，是一个整数，标示开始下一次匹配的字符位置。看下面实例：
<script>
var str = 'good good study day day up';
var re = /good/g;
var arr;
do{
arr = re.exec(str);
console.log(arr);
console.log(re.lastIndex);
}
while(arr !== null)
/*
结果如下：
显示：["good"]，点开后： "good", index , input "good good study day day up"。
lastIndex为。
显示：["good"]，点开后： "good", index , input "good good study day day up"。
lastIndex为。
显示：null
lastIndex为。
*/
</script>
在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用 String.match() 返回的数组是相同的。但是，当 RegExpObject 是一个全局正则表达式时，exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。
通过上面实例，可以看到，当第三次循环时，找不到指定的 "good"，于是返回null，lastIndex值也变成0了。找到的第一个"good"的lastIndex值为4，是匹配文本最后一个字符的下一个位置。
<script>
var str = 'good good study day day up';
var re = /good/g;
var arr;
while((arr = re.exec(str)) != null){
console.log(arr);
console.log(re.lastIndex);
}
/*
结果如下：
显示：["good"]，点开后： "good", index , input "good good study day day up"。
lastIndex为。
显示：["good"]，点开后： "good", index , input "good good study day day up"。
lastIndex为。
*/
</script>
这里需要注意，如果在一个字符串中完成了一次模式匹配之后要开始检索新的字符串(仍然使用旧的re)，就必须手动地把 lastIndex 属性重置为 0。
无论 RegExpObject 是否是全局模式，exec() 都会把完整的细节添加到它返回的数组中。这就是 exec() 与 String.match() 的不同之处，后者在全局模式下返回的信息要少得多。因此可以这么认为，在循环中反复地调用 exec() 方法是唯一一种获得全局模式的完整模式匹配信息的方法。
(3)、compile
compile() 方法用于在脚本执行过程中编译正则表达式，也可用于改变和重新编译正则表达式。主要作用是改变当前(re)匹配模式。
语法：RegExpObject.compile(模式, 修饰符)
模式就是正则表达式，修饰符用于规定匹配的类型，g匹配全局，i忽略大小写，gi全局匹配忽略大小写。
该方法是改变匹配模式时使用的，一般情况下，能用到的地方很少。
实例：在全局中忽略大小写 搜索"day"，并用 "天" 替换，然后通过compile()方法，改变正则表达式，用 "日" 替换 "Today" 或 "day"。
<script> var str = 'Today is a beautiful day, Day day happy！'; var re = /day/gi; var str = str.replace(re, '天'); console.log(str); //输出：To天 is a beautiful 天, 天 天 happy！ reg = /(to)?day/gi; reg.compile(reg); str = str.replace(reg, '日'); console.log(str); //输出：日 is a beautiful 日, 日 日 happy！ </script>
8、正则应用。
正则表达式也叫规则表达式，所以在编写时，和编写JS的流程一样，先虑再写。最重要的就是，要搞清楚他所要表达的规则，先仔细端详其外表，看他到底长的什么模样，也就是以什么样的格式存在，再根据这种格式去写表达式，看是否能达到我们预期的目的，如果未达到，其实一般情况下直接将格式描述成表达式，都不会达到预期的效果，好在我们的主框架已经有了，我们只需要知道是什么地方出错了，什么地方没有达到预期，就可以很简单的在这个框架基础上稍加修改，最后就是完美的表达式了。比如要写一个验证手机号的正则表达式，手机号大家都知道是11位，全部为数字，而且开头是1，紧跟着的2位，因为运营商不同，可有多种组合，后面8位是任意数字，所以我们就可以规定开头必须为1，后面2位根据各运营商提供的不同组合进行限定，最后再输入8位任意数字。这样主框架就算完成了，但是手机号也有特殊情况，比如移动给手机号码前边加上+86依然可以使用，必要的时候我们还需要把这种情况考虑进去，不然用户输入了自己的移动手机号给前边加了个+86，然后点击提及，系统 "啪" 弹出一个窗口，你输入的是毛线，系统不识别，这样就闹笑话了，所以再只需要对框架做出修改，把这种情况考虑进去，就大功告成了。
这么说起来正则表达式貌似很简单的样子，其实挺难的，why are you so diao？归根结底就是这种一般人很难看懂的表达方式，自己当时写的时候很明白表达的是什么，过段时间回头，哎哟我去，怎么不认识了。其实这是一个熟能生巧的过程，记得有篇课文中写到“好记性不如烂笔