| 标签：it | 分类：CS |
在介绍正则表达式语法之前先学习下面几个方法:
正则表达式方法:test(),exec()
String对象方法:match(),search(),replace(),split()
test()方法:
用法:regexp对象实例.test(字符串)
返回值:如果满足regexp对象实例中定的正则规则,返回true,否则返回false
exec()方法:
用法:regexp对象实例.exec(字符串)
返回值:如果 exec 方法没有找到匹配，则它返回 null。如果它找到匹配，则 exec 方法返回一个数组，并且更新全局 RegExp 对象的属性，以反映匹配结果。数组的0元素包含了完整的匹配，而第1到n元素中包含的是匹配中出现的任意一个子匹配。这相当于没有设置全局标志 (g) 的 match 方法。
如果为正则表达式设置了全局标志，exec 从以 lastIndex 的值指示的位置开始查找。如果没有设置全局标志，exec 忽略 lastIndex 的值，从字符串的起始位置开始搜索。
这里需要备注下:上面返回值这段话关于返回数组让我迷惑了好久,因为试验下来返回的都是一个长度的数组,也就是只有一个元素.查了网上很多资料都没有相关的介绍.翻开上次买的"javascript 高级程序设计"一书,在P168有介绍(所谓反向引用,以后介绍)
另外,关于"更新全局 RegExp 对象的属性"我是这样理解的:更新RegExp对象的index和lastIndex属性,在设置了全文匹配参数后可以试验,每次匹配从上一个lastIndex开始搜索.(可以结合下面的属性和后面的例子来体会)
属性，分别是 input、index 和 lastIndex。Input 属性包含了整个被查找的字符串。Index 属性中包含了整个被查找字符串中被匹配的子字符串的位置。LastIndex 属性中包含了匹配中最后一个字符的下一个位置。
match()方法:
用法:string对象.match(regexp对象)
返回值:如果 match 方法没有找到匹配，返回 null。如果找到匹配返回一个数组并且更新全局 RegExp 对象的属性以反映匹配结果。
备注:match和exec一个很明显的差别是设置了全文搜索参数g后它返回的数组不再是一个元素,而是所有的元素,第一个匹配结果数组基数为0,第二个为1,以此类推.
属性:同exec,match也有index,lastIndex,input三个属性,意义也同exec
exec和match差别比较的例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>Untitled Document</title>
</head>
<body>
<script>
var str="hello,caolvchong.I love maomao.I should love her forever";
var reg=/ao/g;
function execstr()//点一下：输出 7-9--ao 再点一下：输出 25-27--ao 再点：28-30--ao
{
var show=reg.exec(str);
alert(show.index+"-"+show.lastIndex+"--"+show);//exec只匹配第一个,show是单元素数组,输出第一个匹配项.index和lastIndex分别是第一项的起始和结束位置.要让exec匹配全部,要用上面exec中举的例子,使用while循环
}
function matchstr()//点一下：输出 28-30--ao,ao,ao
{
var show=str.match(reg);
alert(show.index+"-"+show.lastIndex+"--"+show);//match匹配全部满足正则表达式的式子.show同样是个数组,由于包含了所有匹配项目,一般有多项.javascript中输出数组名将输出全部数组中的内容.当然你也可以用for循环逐个输出各个项,数组下标从0开始.另外,这里的index和lastIndex是最后一个匹配项的起始和结束位置
}
</script>
被搜索字符串:Hello,my name is caolvchong.I love maomao.
用/ao/g正则表达式搜索.<br/>
<input type="button" value="exec方法搜索" onclick="execstr()">
<input type="button" value="match方法搜索" onclick="matchstr()">
</body>
</html>
search()方法:
用法:string对象.search(regexp对象)
返回值:search 方法指明是否存在相应的匹配。如果找到一个匹配，search 方法将返回一个整数值，指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配，则返回 -1.
注意:返回的只是与正则表达式查找内容匹配的第一个子字符串的位置.所以用全局搜索参数就没有意义了.
replace()方法:
用法:string对象.replace(regexp对象|字符串,"替换的字符串")
返回值:如果设置了全文搜索,则全部满足的都将被替换;否则只替换第一个.返回替换后的字符串.
注意:replace中还可以接受字符串,但只替换第一个满足条件的字符串.
split()方法:
用法:string对象.split([分割符(可以是字符串或正则表达式[,限制输出数组个数]])
返回值:返回string对象被分割的数组
注意:string对象不会被split方法修改。分割符是可选项,可以是字符串或正则表达式对象,它标识了分隔字符串时使用的是一个还是多个字符。如果忽略该选项，返回包含整个字符串的单一元素数组.最后一个选项限制输出数组个数也是可选项,该值用来限制返回数组中的元素个数。
另外,split本身就带有全文匹配的特性,所以可用可不用g参数
从上面分析也可以看出一点:正则表达式比字符串替换功能强大.下面的例子也可以看出.
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>正则表达式split</title>
<script>
function split_by_str(){
var txtnode=document.getElementById("txt");//取得div节点
var txt=txtnode.firstChild.nodeValue;//取得文本值
var newtxt=txt.split("AI");//用AI来划分
for(var i=0;i<newtxt.length;i++){//输出
alert(newtxt[i]);
}
}
function split_by_regexp(){
var txtnode=document.getElementById("txt");//取得div节点
var txt=txtnode.firstChild.nodeValue;//取得文本值
var regtxt=/ai/i;//也可以/ai/gi,这个不影响,split本身具有全文匹配功能
var newtxt=txt.split(regtxt);//用AI来划分
for(var i=0;i<newtxt.length;i++){//输出
alert(newtxt[i]);
}
}
</script>
</head>
<body>
<div id="txt">
我AI爱ai毛毛,Ai毛毛aI爱AI我!
</div>
<input type="button" value="用字符串AI来划分" onclick="split_by_str();">
<input type="button" value="用正则表达式Ai或ai或AI或aI来划分" onclick="split_by_regexp();">
</body>
</html>
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>正则表达式replace</title>
<style>
.color_name{
color:red;
font-weight:bold;
background:yellow;
}
</style>
<script language="javascript" type="text/javascript">
function change_name(){//替换文本函数
var txtnode=document.getElementById("txt");//取得div节点
var txt=txtnode.firstChild.nodeValue;//取得文本值
var regstr=/tom/gi;//正则表达式:匹配tom,全文不分大小写检索
var newtxt=txt.replace(regstr,"草履虫");//全部替换
document.getElementById("txt").firstChild.nodeValue=newtxt;//改变文本显示
}
function color_name(){//高亮函数
var txtnode=document.getElementById("txt");//取得div节点
var txt=txtnode.firstChild.nodeValue;//取得文本值
var regstr=/tom/gi;//正则表达式:匹配tom,全文不分大小写检索
var arr=txt.match(regstr);//match方法取得满足匹配的所有字符串
for(var i=0;i<arr.length;i++){//遍历满足匹配的所有字符串
var newtxt=txt.replace(regstr,'<span class="color_name">'+arr[i]+'</span>');//替换,实际上就是添加标签,该标签高亮
txtnode.innerHTML=newtxt;//不能用nodeValue修改,nodeValue不支持转化为html,所以用innerHTML
}
}
</script>
</head>
<body>
<div id="txt">
Hello,everyone!
His name is tom.
Do you know Tom?
TOM is a boy who loves football and PC.
So,do you want to make friends with TOm.
</div>
-----------------------------------------<br/>
把上面的Tom(包括各种形式)高亮或转化为草履虫<br/>
-----------------------------------------<br/>
<input type="button" value="高亮TOM" onclick="color_name();">
<input type="button" value="转化TOM" onclick="change_name();">
</body>
</html>
例子:(是根据上面exec方法改变了下)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>正则表达式</title>
<script language="javascript" type="text/javascript">
function regexp_str(){
var getStr=document.getElementsByTagName("input")[0].value;
var regexpStr;
var searchType=document.getElementsByTagName("input")[1].value;
if(searchType==1){ //是否大小写判断
regexpStr=/cat/i;
}
else{
regexpStr=/cat/;
}
var arr = getStr.search(regexpStr);
if(arr==-1){ //没有找到返回-1
alert("输入的字符串中没有出现cat");
}
else{ //找到返回第一次匹配的位置
alert("第一个匹配cat的字符串出现位置:"+arr);
}
}
function checkbox_value(){
var searchType=document.getElementsByTagName("input")[1].value;
if(searchType==1)
searchType=0;
else
searchType=1;
document.getElementsByTagName("input")[1].value=searchType;
}
</script>
</head>
<body>
<input type="text">
忽略大小写:<input type="checkbox" checked value="1" onchange="checkbox_value();">
<input type="button" value="查询" onclick="regexp_str();">
</body>
</html>
例子:
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>正则表达式</title>
<script language="javascript" type="text/javascript">
function regexp_str(){//匹配正则表达式函数
var getStr=document.getElementsByTagName("input")[0].value;//取得输入
var regexpStr,arr;
var searchType=document.getElementsByTagName("input")[1].value;//是否全文搜索
if(searchType==1){//全文搜索
regexpStr=/cat/g;//g,全文搜索参数
while ((arr = regexpStr.exec(getStr)) != null){//当还没匹配完之前
alert(arr.index + "-" + arr.lastIndex + arr + "---"+arr.input);
//index是找到匹配的起始位置;lastIndex是找到匹配的末位置+1.比如这个例子:要匹配cat,而你输入的是1cat2cat3,则第一次匹配index为1,lastIndex为4.第二次匹配index为5,lastIndex为8.从这里也可以看出,lastIndex是配置了全文搜索后下一个搜索的开始位置.
//arr是输出整个数组,由于只有一个长度,输出的就是匹配的字符串
//input属性是在这里是输入的字符串,广义来说,就是被搜索的全文,比如上面举例的1cat2cat3
}
}
else{ //一次匹配
regexpStr=/cat/;
arr = regexpStr.exec(getStr);
alert(arr.index + "-" + arr.lastIndex + arr + "---"+arr.input); //由于只是一次匹配,就不要像上面那样用循环了(不然出现匹配情况,每次始终从头开始搜索,不能达到null,陷入死循环)
}
}
function checkbox_value(){//改变checkbox的值
var searchType=document.getElementsByTagName("input")[1].value; //取得当前checkbox值
if(searchType==1) //checkbox值为1改为0,否则改为1
searchType=0;
else
searchType=1;
document.getElementsByTagName("input")[1].value=searchType;
}
</script>
</head>
<body>
<input type="text">
全文搜索:<input type="checkbox" checked value="1" onchange="checkbox_value();">
<input type="button" value="查询" onclick="regexp_str();">
</body>
</html>
例子:(第一篇正则表达式例子)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>正则表达式</title>
<script language="javascript" type="text/javascript">
function regexp_str(){
var getStr=document.getElementsByTagName("input")[0].value; //取得输入值
var regexpStr=/cat/; //建立正则对象,匹配为cat
if(regexpStr.test(getStr)) //正则对象的test方法,后面会介绍(就是匹配返回true,否则返回false)
alert("输入的字符串"+getStr+"包含"+regexpStr.source); //正则对象的source属性,后面会介绍(就是返回正则对象设置的匹配值)
else
alert("输入的字符串"+getStr+"不包含"+regexpStr.source);
}
</script>
</head>
<body>
<input type="text">
<input type="button" value="查询" onclick="regexp_str();">
</body>
</html>
JavaScript中的正则表达式解析
|
JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法. 第一个特殊字符 "s" 是按照字面意思与自身相匹配.第二个字符 "$" 是一个特殊字符,它所匹配的是字符串的结尾.所以正则表达式 /s$/ 匹配的就是以字母 "s" 结尾 在正则表达式中,括号的第二个用途是在完整的模式中定义子模式。当一个正则表达式成功地和目标字符串相匹配时,可以从目标串中抽出和括号中的子模式相匹配的部分.例如,假定我们正在检索的模式是一个或多个字母后面跟随一位或多位数字,那么我们可以使用模式 / [a-z] + / d+/.但是由于假定我们真正关心的是每个匹配尾部的数字,那么如果我们将模式的数字部分放在括号中 (/ [a-z] + (/d+)/) ,我们就可以从所检索到的任何匹配中抽取数字了,之后我们会对此进行解析的. 代括号的子表达式的另一个用途是,允许我们在同一正则表达式的后面引用前面的子表达式.这是通过在字符串 / 后加一位或多位数字来实现的.数字指的是代括号的子表达式在正则表达式中的位置.例如: /1 引用的是第一个代括号的子表达式. /3 引用的是第三个代括号的子表达式.注意,由于子表达式可以嵌套在其它子表达式中,所以它的位置是被计数的左括号的位置. 例如:在下面的正则表达式被指定为 /2: /[' "] [^ ' "]*[' "]/ /( [' "] ) [^ ' "] * /1/ /1匹配的是第一个代括号的子表达式所匹配的模式.在这个例子中,它实施了一种规约,那就是开始的引号必须和结束的引号相匹配.注意,如果反斜杠后跟随的数字比代括号的子表达式数多,那么它就会被解析为一个十进制的转义序列,而不是一个引用.你可以坚持使用完整的三个字符来表示转义序列,这们就可以避免混淆了.例如,使用 /044,而不是/44.下面是正则表达式的选择、分组和引用字符: 例如:要匹配词 "javascript" ,我们可以使用正则表达式 /^ javascript $/. 如果我们想检索 "java" 这个词自身 (不像在 "javascript" 中那样作为前缀),那么我们可以使用模式 //s java /s /, 它要求在词语java之前和之后都有空格.但是这样作有两个问题.第一: 如果 "java" 出现在一个字符的开头或者是结尾.该模式就不会与之匹配,除非在开头和结尾处有一个空格. 第二: 当这个模式找到一个与之匹配的字符时,它返回的匹配的字符串前端和后端都有空格,这并不是我们想要的.因此,我们使用词语的边界 /b 来代替真正的空格符 /s 进行匹配. 结果表达式是 //b java /b/. 下面是正则表达式的锚字符: 例如: 要执行一个大小不敏感的检索以找到词语 "java" (或者是 "java" 、"JAVA"等) 的第一个具体值,我们可以使用大小不敏感的正则表达式 //b java/b/i .如果要在一个字符串中找到 "java" 所有的具体值,我们还可以添加属性 g, 即 //b java /b/gi . 正则表达式(regular expression)对象包含一个正则表达式模式(pattern)。它具有用正则表达式模式去匹配或代替一个串(string)中特定字符(或字符集合)的属性(properties)和方法(methods)。要为一个单独的正则表达式添加属性,可以使用正则表达式构造函数(constructor function)，无论何时被调用的预设置的正则表达式拥有静态的属性(the predefined RegExp object has static properties that are set whenever any regular expression is used, 我不知道我翻得对不对，将原文列出，请自行翻译)。
[注意] 文本格式的参数不用引号，而在用构造函数时的参数需要引号。如：/ab+c/i new RegExp("ab+c","i")是实现一样的功能。在构造函数中，一些特殊字符需要进行转意(在特殊字符前加"/")。如：re = new RegExp("//w+") 正则表达式中的特殊字符
说了这么多了，我们来看一些正则表达式的实际应用的例子：
|