javascript正则表达式(一)

正则表达式一般用于描述一个复杂字符串的组成规则。比如我们平常指定一个电话号码时,可以用许多种方式来表示:1)区号可以是3位或4位2)区号可以加上(),如:(0
正则表达式一般用于描述一个复杂字符串的组成规则。比如我们平常指定一个电话号码时,可以用许多种方式来表示:
1)区号可以是3位或4位
2)区号可以加上(),如:(010)
3)区号和电话号之间可以用 - 分隔,也可以不分隔
4)后面的电话号可以是7位或8位
5)不能包含上面提到的其它符号
具体的例子有:
0739 - 8711100 或 07398711100 或(0739)8711100或(0739)-8711100……等等!

当我们需要检测某个电话号码的格式是否正确时,我们就应该遵循上面的规则进行判断。上面的这些规则如果我们用程序来做检测也是可以的只要你愿意用那些复杂的方式。但如果使用正则表达式来定义其规则,可以让我们的工作变得更加轻松、有效率!下面是国内电话号码的一个正则表达式,遵循了上面的所有规则:
/^[(]?0\d{2,3}[)]?\s*[-]?\s*\d{7,8}$/


看起来好像非常的复杂,其实等你掌握了一些基本知识之后,马上就能自己写出它。那么就上面的正则表达式,我们可以看到:
1)整个规则用/ /包含在内。
2)其中有^  $  ?  \d   {n,m}  *  [ ]等符号,这些是元字符或数量符,也是正则表达式的基础。

好,现在我们知道了正则表达式用 /规则/表式。那么关键就是规则了,在表示规则时,需要用到许多有含义的字符,这些字符我们称它为元字符。这也是今天的主题。先来回忆一下在windows中我们常用的*和?吧:

* —— 匹配任意个任意符号(如:a*b.txt)
? —— 匹配0到1个任意符号(如:a?b.txt)

其中的* 和 ?是有特定函义的符号,我们称为“通配符”。恩,这是在 windows中的通配符。
在正则表达式中,也同样存在一些这样的符号,只不过它们的函义有不同,而且符号的个数相对也比较多,如下是一些常用的正则表达式元字符:
.    匹配除换行符以外符号
\w    匹配字母、汉字、数字、下划线等符号
\s    匹配空白符(包含空格、制表符等)
\d    匹配数字
\b    表示单词边界
^    表示字符串的开始
$    表示字符串的结尾

下面是它们的运用示例,很简单,但有助于理解:
【例1】以数字开头
/^\d/    解释:^表示开头, \d表示数字。那么你应该会完成以数字结束的例子。

【例2】单词word
错误:/word/    看起来是正确的。那是请注意我们需要是单词word,重点看单词二字。如果有一个"words"的字符串,也将会匹配
正确:/\bword\b/    单词的两边应该用\b包含。因为\b是指单词边界,而单词的边界一般为标点或空格。也就是说words不会匹配规则,但是word,会匹配规则

【例3】以ing结尾的单词
/ing\b$/    如bing、eaching等都会匹配。但是123ing也将产生匹配,而单词一般是由字母组成的。所以还得继续修改成:/^\b[a-zA-Z]*ing\b$/的形式。其中[]是什么意思下面讲解。*号表示可以出现任意次(后面会做解说)。

如果我们把符号包含在[]内,表示包含其中的任何一个符号都算匹配。如:/[abcd]/将匹配 a 或 b 或 c 或 d或它们的任意组合。在[]内还可以用n-m表示一个范围,如上例中的[a-z]表示所有的小写字母,同样[0-9]表示任意数字符号。如此便有:[a-zA-Z0-9]表示所有的数字和字母。千万记住:中括号内的任何一个符号出现了就算匹配

【例4】以数字开头的单词。(我没说错哦,还记得:1st吗?)
/^\b[0-9][0-9a-zA-Z]+\b$/    解析:两个\b表示单词边界。[0-9]表示数字。[0-9a-zA-Z]表示后面除了出现字母外,还可以现数字。如:12th。当然,你可以这样写:/^\b\d[0-9a-zA-Z]+\b$/

好了。今天只需要知道这些就够了,不要一次学得太多。
上面的内容如何去做测试呢?
方法一:自己编写代码去测试

<script type="text/javascript">
var reg = /规则/;
var s = "字符串";

document.write ( reg.test(s) );
//如果匹配规则,返回true,否则返回false
</script>

方法二:写一个简单的测试程序,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则表达式测试程序</title>
<style type="text/css">
.input
{ width:500px; font-size:20px; font-weight:bold; margin-bottom:10px; }
.button
{ width:100px; padding:5px; font-size:20px; cursor:pointer; }
#ret
{ color: #00f; font-size:20px; }
</style>
</head>

<body>
<p>
正则表达式:
<input type="text" id="reg" size="100" class="input" />(只需输入/ /以内的内容,否则得不到正确的结果)<br />
测试字符串:
<input type="test" id="text" size="100" class="input" />
</p>

<p><input type="button" value="检测" onclick="testREG()" class="button" /></p>

<p id="ret"></p>

<script type="text/javascript">
function testREG() {
var reg = new RegExp(document.getElementById("reg").value);
var text = document.getElementById("text").value;
var ret = document.getElementById("ret");

ret.innerHTML
= "测试结果为:" + reg.test(text);
}
</script>
</body>
</html>

如果你是正则高手了,请帮忙指点。如果你觉得对您有用,请继续关注!

转载请注明:转载自web前端开发

您可能有感兴趣的文章
js canvas实现QQ拨打电话特效

常用JS正则表达式

JavaScript正则表达式(一)

JavaScript与正则表达式

一文读懂JavaScript 正则表达式