javascript正则表达式知识拓展总结

javascript的正则表达式是前端中比较重要的部分，正则表达式主要用于字符串处理，表单验证等场合，实用高效。JavaScript中的正则表达式比起C#中的正则表达式要弱很多，但基本够用了。在js中定义正则表达式很简单，有两种方式，一种是通过构造函数，一种是通过//，也就是两个斜杠：

var   re =new RegExp("?(w{1,}=w{1,}&){1,}w{1,}=w{1,}");

使用构造函数定义正则表达式，注意大小写，否则就会不起作用。由于构造函数的参数是一个字符串，也可以是两个斜杠的方式定义，遇到一些特殊字符就需要使用进行转义通过双斜杠的方式定义同样的正则表达式。

var   re =/?(w{1,}=w{1,}&){1,}w{1,}=w{1,}/;

var re =new RegExp( /^?(w{1,}=w{1,}&){1,}w{1,}=w{1,}/);

可以和构造函数达到同样的效果，但仔细分析，发现，通过构造函数需要更多的转义字符

如何在javascript中真正使用正则表达式呢？在javascript中RegExp和String对象都有处理正则表达式的方法。

• test -- RegExp的test方法用来测试字符串是否匹配给出的匹配模式，返回布尔值；

• exec -- RegExp的exec方法返回包含第一个匹配的的数组或null；

• match -- String的match方法返回包含所有匹配子字符串的数组；

• replace -- String的replace方法完成string的替换操作，支持正则表达式；

• search -- 与String的indexof方法类似，不同的是search支持正则表达式，而不仅仅是字符串；

• split -- 按照一定规则拆分字符串并将子字符串存储到数组中的String方法。

关于这些函数的具体使用方法，可以参阅JS的相关函数手册。

一个实例对象除了方法当然还有属性，一个正则表达式有以下属性：

• global -- 布尔值，若全局选项g已设置则返回true，否则返回false；

• ignoreCase -- 布尔值，若忽略大小写选项i已设置则返回true，否则返回false；

• lastIndex -- 整数，使用exec或test方法时被填入，表示下次匹配将会从哪个字符位置开始；

• multiline -- 布尔值，表示多行模式选项m是否设置，若设置则返回true，否则返回false；

• source -- 正则表达式的元字符串形式。/\\/的source将返回”\\“。

常用的经典Javascript正则表达式

[\u4e00-\u9fa5]

[^\x00-\xff]

String.prototype.len=function(){ return this.replace([^\x00-\xff]/g,"aa").length; }

\n[\s|]*\r

/<(.*)>.*<\/\1>|<(.*) \/>/

(^\s*)|(\s*$)

String.prototype.trim = function()
{
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

function IP2V(ip)
{
    re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g  //匹配IP地址的正则表达式
    if(re.test(ip))
    {
        return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
    }
    else
    {
        throw new Error("Not a valid IP address!")
    }
}

var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))

\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

var s="abacabefgeeii"
var s1=s.replace(/(.).*\1/g,"$1")
var re=new RegExp("["+s1+"]","g")
var s2=s.replace(re,"")
alert(s1+s2)  //结果为：abcefgi

表达式来实现去除重复字符的方法：

s="http://blog.penner.cn/page1.htm"
s=s.replace(/(.*\/){ 0, }([^\.]+).*/ig,"$2")
alert(s)

利用正则表达式限制网页表单里的文本框输入内容：

[^\u4E00-\u9FA5]

[^\uFF00-\uFFFF]

onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

^\d+$

^[0-9]*[1-9][0-9]*$

^((-\d+)|(0+))$

^-[0-9]*[1-9][0-9]*$

^-?\d+$

^\d+(\.\d+)?$

^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

^((-\d+(\.\d+)?)|(0+(\.0+)?))$

^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

^(-?\d+)(\.\d+)?$

^[A-Za-z]+$

^[A-Z]+$

^[A-Z]+$

^[A-Za-z0-9]+$

^\w+$

^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$

^[a-zA-z]+://匹配(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$

<\s*(\S+)(\s[^>]*)?>(.*?)<\s*\/\1\s*>

javascript常用的正则表达式实例

查看实例》

正则表达式在JavaScript中的高级应用

子模式

子模式了。用来指定重复次数的元字符只能作用于紧挨着它的字符或元字符，而在实际应用中我们需要进行重复匹配的字符往往不一定就只是一个字符或元字符，就如reUrl中所要匹配的“http”和“net”就是多个字符，这时候就可以使用（和）将多个字符括起来作为一个独立的元素来使用。比如验证email地址的正则表达式var    reMail =    /\w+@\w+\.\w+/i;并不完善，一个有效的用户名除了可以是字母、数字、下划线外，还可以是点号，同时域名部分也不能保证是mail.com这行的形式，也完全有可能是mail.mymail.com这样的形式，所以一个更为完善的匹配有效email地址的正则表达式是这样的：

var reEmail = /(\w+\.)*\w+@(\w+\.)+\w+/i;

回溯引用

在web开发中，我们经常需要去匹配HTML标签，大多数的HTML标签都有一个开始标记和结束标记如<h1></h1>,<div></div>，如果只需单纯的匹配H1和DIV我们可以很容易的构造出该正则表达式：

var reH1 = /<h1>.*?<\/h1>/gi;
var reDiv = /<div>.*?<\/div>/gi;

但是我们所要匹配的并不是某个或某几个HTML标签，事实上HTML具体是什么样的形式我们完全是未知的，比如XML的标记我们是完全无法预计的，所以分组匹配在这里完全排不上用场。幸运的是，在正则表达式中回溯引用允许正则表达式模式引用前面的匹配结果。具体应用可以参考下面匹配HTML标签的正则表达式。

var html = "<h1>nowamagic</h1>";
var reTag = /<(\w+\d?)>.*?<\/\1>/gi;
document.write(html.match(reTag));//<h1>nowamagic</h1>

reTag最后部分的\1便是一个回溯引用，引用的前面的第一个子模式(\w+\d?)，当然如果前面还存在第二个子模式我们也可以使用\2引用、。注意：回溯引用只能引用前面已经匹配过的结果，而下面这样的写法就是错误的。

var reTag = /<\1>.*?<\/(\w+\d?)>/gi;

回溯引用在替换操作中有着十分广泛的应用。比如我们要将一段文本中的所有网址自动添加上其对应的超链接，即是将“http://nowamagic.net”的字符串替换成nowamagic的形式。我们就可以这样处理：

var url = "http://nowamagic.net";
var reUrl = /(http[s]*:\/{2}(\w+\.)+\w+)/gi;
//<a href="http://nowamagic.net">http://nowamagic.net</a>document.write(url.replace(reUrl,'<a href="$1">$1</a>'));

$1引用了前面的子模式(http[s]*:\/{2}(\w+\.)+\w+)。注意：javascript中进行替换操作时回溯引用使用”$”而不是”\”。

前后查找

如果我们需要获取h1标签中的文本（包含在h1标签中的文本，不包括h1本身），这个正则表达式应该如何写？比如”<h1>front-end</h1>”，在所有介绍过的方法中，似乎都还没有提及过要匹配某个字符串，但却只返回某些字符前或后的字符串的情况，正则表达式中确实是存在这样的语法。

var fe = "<h1>front-end</h1>";
var reInnerText = /(?<=<h1>).*?(?=<\/h1>))/i;

在reInnerText和/<h1>.*?<\/h1>/i的匹配模式是相同的，唯一不同的返回结果，/<h1>.*?<\/h1>/i会返回整个fe字符串，而reInnerText只返回”front-end”，比较这两个正则表达式可以发现两处不同的写法：(?<=<h1>)，(?=<\/h1>)。(?<=<h1>)定义了一个向后查找模式，即匹配结果只包括”<h1>”后面的部分；(?=<\/h1>)则定义的是一个向前查找模式，匹配结果只返回”</h1>”前的结果；所以reInnerText的匹配结果只返回”<h1>”和”</h1>”之间的内容！前后查找的语法很简单，向前查找是一个以”?=”开头的字表达式，而向后查找确实一个以”?<=”开头的字表达式。

遗憾的是javascript并不支持正则表达式的向后查找，所以事实上reInnerText的写法在javascript是有语法错误的。有条件可以使用其他支持前后查找的语言进行验证，比如PHP。

$title = '<h1>front-end</h1>';
if(preg_match('/(?<=<h1>).*?(?=<\/h1>)/i',$title,$rst)){
   echo $rst[0];//front-end
}