正则表达式在html5中的应用,正则表达式-正则表达式的应用示例
上面一篇文章中列出了JavaScript中支持的所有元字符和元符号，以及它们所代表的含义。这篇文章中我们将通过具体的例子来演示这些元字符和元符号的使用方法。
圆点(.)元字符
在正则表达式中，圆点(.)元字符代表任何字符(除了回车换行符之外)。通常使用圆点字符来表示占据一个位置，进而表达圆点两侧符号之间的距离关系。例如，正则表达式/a..b/的含义是：匹配以字符a开头，后面跟两个任意字符，然后是字符b的子串。正则表达式/../表示匹配任何由两个字符组成的子串。
下面的例子搜索字符串中是否包含有“java”子串，正则表达式为：/j..a/gi。你可以在文本框中输入字符串来进行测试。
var myString = $("#textarea-1").val();
var regex = /j..a/gi;
if(regex.test(myString)){
alert("在字符串“"+myString+"”中找到了正则表达式/j..a/gi的匹配。")
}else{
alert("没有找到匹配的模式。");
}
查找匹配模式
字符类匹配
字符类表示一组字符的一个字符，例如。[xyz]表示匹配x，y，z这个3个字母中的任何一个，[北上广]匹配汉字“北”、“上”、“广”中的任何一个，[0-9]匹配0-9的任何一个数字。当字符类以脱字符^开头时，表示匹配不在这组字符中的任何字符。例如：[^0-9]表示匹配不是0-9的任何字符，[^a-zA-z]表示匹配不是字母的任何字符。
检测字符串中是否包含数字
下面的例子检测字符串中是否包含有数字。
var myString = $("#textarea-2").val();
var regex = /[0-9]/;
if(regex.test(myString)){
alert("在字符串“"+myString+"”中找到了数字。")
}else{
alert("在字符串中没有找到数字。");
}
查找匹配模式
检测字符串中是否包含非字母的字符
下面的例子检测字符串中是否包含有非字母的字符。
var myString = $("#textarea-3").val();
var regex = /[^a-zA-Z]/;
if(regex.test(myString)){
alert("在字符串“"+myString+"”中找到了非字母的字符。")
}else{
alert("在字符串中没有找到非字母的字符。");
}
查找匹配模式
检测字符串中是否包指定个数的数字
下面的例子检测字符串中是否包含有连续4个数字的子串。
var myString = $("#textarea-4").val();
var regex = /\d\d\d\d/;
if(regex.test(myString)){
alert("在字符串“"+myString+"”中找到了4个连续数字的子串。")
}else{
alert("在字符串中没有找到4个连续数字的子串。");
}
查找匹配模式
元符号\s、\S、\w、\W匹配演示
这个例子中，正则表达式的匹配模式为一个单词字符开始，后面跟一个空白字符，然后又是一个单词字符，接着是一个非单词字符，最后是一个非空白字符。你可以试一试：XY2 Z!?
var myString = $("#textarea-4").val();
var regex = /\w\s\w\W\S/;
if(regex.test(myString)){
alert("在字符串“"+myString+"”中找到了正则表达式/\w\s\w\W\S/的匹配")
}else{
alert("在字符串中没有找到正则表达式的匹配。");
}
查找匹配模式
限定符元字符的使用
前面的元字符示例中都是只匹配一个字符，如果我们想匹配多个字符时，可以使用表示重复次数的限定元字符。限定符元字符可以指定匹配的次数，也可以指定匹配次数的范围，还可以指定多少次以上的匹配。
最长匹配原则(贪婪匹配原则)
默认情况下，JavaScript的正则表达式引擎使用贪婪匹配原则来搜索重复元字符匹配的子串，也就是说，从字符串左边的位置开始，尽可能的向右边匹配，只要满足指定的正则表达式就匹配。例如：
var str = "ab12345678901234567890cd";
var regex = /ab[0-9]*/;
如果使用字符“X”替换上面的正则表达式匹配的子串，得到的结果是：
var myString = str.replace(/ab[0-9]*/,"X");
alert(myString); //输出Xcd
替换后得到的结果是Xcd，而不是X2345678901234567890cd。
元字符*是一个最长匹配(贪婪匹配)的元字符，它匹配任意多个字符，并且总是尽可能多的匹配字符。在上面的例子中，星号作用在[0-9]上，表示匹配任意个数的数字。在遇到非数字字符之前，元字符*一直匹配，直到遇到字符c为止。所以，上面的正则表达式匹配以ab开头，后面跟任意多个数字的子串，使用字符串对象的replace()方法替换后，将整个匹配的子串替换为X，所以替换后的字符串为Xcd。
贪婪匹配特性(*元字符)
var myString = "Hello world!";
var regex = /[A-Z][a-z]*\s/;
if(regex.test(myString)){
alert("在字符串“"+myString+"”中找到了正则表达式/[A-Z][a-z]*\\\s/的匹配");
var arr = regex.exec(myString);
$("#output-1").text("匹配的子串为： "+arr[0]);
}else{
alert("在字符串中没有找到正则表达式的匹配。");
}
这个例子要求匹配字符串中包含以大写字母开头，后面跟任意多个小写字母，然后是一个空白字符的子串。如果找到，则将匹配的子串在页面中输出。
你可以测试字符串“Hello world!”和字符串“HELLO WORLD”的区别。第一个字符串得到的结果是“Hello”，而第二个字符串得到的结果是“H”，*匹配0个字符。
贪婪匹配特性(+元字符)
元字符+匹配一个或多个字符，它与*不同之处在于：*可以匹配0个字符，而+至少要匹配一个字符。
var myString = "abcccccd";
var regex = /bc+d/;
var result= regex.test(myString);
if(result){
var arr = regex.exec(myString);
alert(arr[0]);
}
执行上面的代码，得到的结果是：bcccccd。
贪婪匹配特性({n}元字符)
元字符{n}表示精确匹配n次某个字符，这里的n是一个具体的数字。
var myString = "abcccccdbcd";
var regex = /bc{5}d/;
var result= regex.test(myString);
if(result){
var arr = regex.exec(myString);
alert(arr[0]);
}
执行上面的代码，得到的结果为：bcccccd，而后面的bcd不会被匹配。
贪婪匹配特性(x{n,m}元字符)
元字符x{n,}表示至少匹配n次，它比元字符x{n}只多了一个逗号。元字符x{n,m}表示至少匹配n次，但是至多匹配m次。当需要指定匹配次数大于1的时候，使用x{n,}，当需要精确匹配的次数时，使用x{n}，当需要指定匹配次数在一个范围的时候，使用x{n,m}。
var myString = "(010)13507738888";
var regex = /\d{7,11}/;
var result= regex.test(myString);
if(result){
var arr = regex.exec(myString);
alert(arr[0]);
}
上面的代码匹配7-11个连续的数字，得到的结果为：13507738888。
关闭元字符的贪婪匹配特性
如果我们需要的匹配结果不是最长匹配，而是首次匹配，该如何操作呢？其实方法非常简单：我们只需要在贪婪匹配修饰符的后面添加一个问号(?)即可。这个问号关闭了元字符的贪婪匹配特性，它表示匹配动作在第一次匹配后结束，而不是在最后一次匹配时结束。
我们来看下面的例子，第一个例子中使用了贪婪匹配特性，而第二个例子中关闭了贪婪匹配特性，看看它们之间的区别。
/** 贪婪匹配 **/
var myString = "abcdefghijklmnopqrstuvwxyz12345";
var regex = /[a-z]+/;
myString = myString.replace(regex,"YYYY");
alert("替换后的字符串为： "+myString);
正则表达式/[a-z]+/表示匹配一个或多个小写字母，并且是进行贪婪匹配，所以得到的结果为：YYYY12345。
/** 关闭贪婪匹配 **/
var myString = "abcdefghijklmnopqrstuvwxyz12345";
var regex = /[a-z]+?/;
myString = myString.replace(regex,"YYYY");
alert("替换后的字符串为： "+myString);
这一次，我们使用的正则表达式是/[a-z]+?/，它表示匹配一个或多个小写字母，但不进行贪婪匹配，在找到第一个小写字母之后，就停止了进一步的匹配。所以得到的结果为：YYYYbcdefghijklmnopqrstuvwxyz12345
定位元字符的使用
在实际应用中，除了需要在字符串的任意位置找到匹配的子串外，很多时候还需要在指定的位置查找是否存在匹配的子串。例如，我们可能需要查找在行首是否出现某个单词，在行尾是否出现了某个子串等等。
JavaScript中提供了一组元字符来完成这些功能，这样的元字符称为定位元字符，它匹配的是字符串出现的位置而不是字符串本身。
行首匹配(^元字符)
^元字符代表行首，而不是具体的字符。
var myString = "JavaScript和正则表达式";
var regex = /^JavaScript/;
if(regex.test(myString)){
alert("匹配成功");
}else{
alert("匹配失败");
}
上面的正则表达式匹配以“JavaScript”开头的字符串，如果不是以“JavaScript”开头，哪怕是前面多一个空格符，匹配也不会成功。
行尾匹配($元字符)
$元字符表示行尾匹配，它的用法于^元字符相同。
var myString = "JavaScript和正则表达式";
var regex = /正则表达式$/;
if(regex.test(myString)){
alert("匹配成功");
}else{
alert("匹配失败");
}
如果上面的字符串的结尾是一个标点、空白符或其它字符，那么匹配失败。
单词匹配(\b元字符)
某些时候我们想要在字符串中查找一个完整的单词，而不是包含在某个单词中的部分子串。例如：我们想要查找的是单词man，而不是单词superman中的man。此时，我们就可以使用元字符\b来指定这种类型的匹配。例如下面的例子查找字符串中是否有单词man。
var myString = "A man without money is no man at all.";
var regex = /\bman\b/;
if(regex.test(myString)){
alert("在字符串中找到匹配的模式/\\bman\\b/的子串。");
}else{
alert(在字符串中未找到匹配的子串。);
}
如果将字符串中的man该为superman，那么将匹配失败。
相关阅读