首页 > JavaScript > JavaScript 用于模式匹配的 String 方法
2009八月16

JavaScript 用于模式匹配的 String 方法

直接把书里的标题拿过来了,因为实在不知道该叫什么合适。前面我为大家介绍了用于创建正则表达式的语法,今天呢就来告诉大家正则表达式在JavaScript代码中如何使用。本篇日志先主要讨论String对象的部分方法,其在正则表达式中执行模式匹配和检索与替换操作

String对象支持四种利用正则表达式的方法,分别是search()replace()match()split()下面我们逐一进行讲解。

search()检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串:

search()方法应该是这四个方法中最简单的一个。其以正则表达式为参数,返回第一个与之匹配的子串的开始字符的位置,如果没有任何匹配的子串,其返回-1。

//返回11,字符串第一个字符位置为0
var str = 'Welcome to xiaoxiaozi.com';
document.write(str.search(/xiaoxiaozi/));
//返回-1,因为我没有指定模式i
var str = 'Welcome to xiaoxiaozi.com';
document.write(str.search(/XIAOXIAOZI/));
//返回11,因为我指定了模式为i
var str = 'Welcome to xiaoxiaozi.com';
document.write(str.search(/XIAOXIAOZI/i));

刚才示例中参数我传的是正则表达式,如果search()的参数不是正则表达式,它首先将被传递给RegExp构造函数,转换成正则表达式。不过这里需要注意的一下是search()不支持全局检索,因为它忽略了正则表达式参数标志g

replace() 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串:

方法replace()执行检索与替换操作。它的第一个参数是一个正则表达式,第二个参数是要进行替换的字符串。它将检索调用它的字符串,根据指定的模式来匹配。如果正则表达式中设置了标志g,该方法将用替换字符串替换被检索的字符串中所有与模式匹配的子串,否则它只替换所发现的第一个与模式匹配的子串。

如果replace()的第一个参数是字符串,而不是正则表达式,该方法将直接检索那个字符串,而不是像search()那样用RegExp()构造函数将它转换成一个正则表达式

//顺利被转换,输出为:http://www.xiaoxiaozi.com say:"Welcome to http://www.xiaoxiaozi.com.com"  
var str = 'xiaoxiaozi say:"Welcome to XIAOXIAOZI.com"';
document.write(str.replace(/xiaoxiaozi/gi,'http://www.xiaoxiaozi.com'));

我们曾经介绍过“正则表达式的分组”,其用括号括起来的子表达式是从左到右进行编号的,而且正则表达式会记住与每个子表达式匹配的广西。如果在替换字符串中出现了符号$(我就说老外都喜欢美元)加数字,那么replace()将用与指定的子表达式相匹配的广西来替换这两个字符。

//将双引号替换为``,并且双引号内的字符串保留xiaoxiaozi say:``Welcome to XIAOXIAOZI.com``
var str = 'xiaoxiaozi say:"Welcome to XIAOXIAOZI.com"';
var pattern = /"([^"]*)"/; //匹配的是在双引号内,且里面不含有双引号的字符串
document.write(str.replace(pattern,"``$1``"));

//给xiaoxiaozi.com中的xiaoxiaozi标红
var str = 'xiaoxiaozi say:"Welcome to XIAOXIAOZI.com"';
var pattern = /(xiaoxiaozi).com/i;
document.write(str.replace(pattern,"<font color='red'>$1</font>"));

刚才我们给出的示例中,replace()的第二个参数都是字符串,其实其第二个参数还可以是函数,该函数能够动态地计算替换字符串,并且其函数的参数顺序分别为:匹配整体正则的字符串,匹配模式1的字符串,匹配模式2的字符串…

//将字符串的首字母大写
name = 'aaa bbb ccc';

uw=name.replace(/\b\w+\b/g, function(word){
    return word.substring(0,1).toUpperCase()+word.substring(1);}
    );

document.write (uw);

match() 可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配:

match()方法是最常用的String方法,它唯一的参数就是一个正则表达式(或把它的参数传递给构造函数RegExp() 以转换成正则表达式),返回的是包含了匹配结果的数组。如果该正则表达式有标志g,该方法返回的数组包含的就是出现在字符串中的所有匹配。

//result=["1","2","3","4"]
var str = '1a 2b 3c 4d';
var pattern = /\d+/g;
var result = str.match(pattern);
for(i in result)
{
        document.write(result[i]);
}

如果match()参数中没有设置g标志,其进行的就不是全局检索,但是仍然返回一个数组。在这种情况下,数组的第一个元素就是匹配的字符串,而余下的元素则是天上则表达工中用括号括起来的子表达式。其返回的数组为result,result[0]存放的是完整匹配,result[1]存放的是$1匹配的内容,和replace()第二个函数参数一致。

/*
i is 0  http://www.xiaoxiaozi.com/index.php
i is 1  http
i is 2  www.xiaoxiaozi.com
i is 3  index.php
i is index  11
i is input  my home is http://www.xiaoxiaozi.com/index.php
*/

var str = 'my home is http://www.xiaoxiaozi.com/index.php';
var pattern = /(\w+):\/\/([\w.]+)\/(\S*)/;
var result = str.match(pattern);
for(i in result)
{
        document.write("i is "+i+"&nbsp;&nbsp;"+result[i]+"<br/>");
}

此例我们可以看出,其如果作用于一个非全局的正则表达式,那么match()返回的数组还包括另外两个属性——index和input,前者包含的是在字符串中匹配开始处的字符的位置,后者则是目标字符串的一个副本。

split() 用于把一个字符串分割成字符串数组:

String对象的最后一个有关正则表达式的方法是split(),此方法可以通过分隔符把调用它的字符串分隔为一个子串数组。其分隔符可以是字符,字符串,也可以是正则表达式。

/*
用一个空格分隔字符串
my
home
page
is
http://www.xiaoxiaozi.com
*/

var str = 'my home page is http://www.xiaoxiaozi.com';
var result = str.split(" ");
for ( i in result)
{
        document.write(result[i] + "<br/>");
}

上例没有用正则表达式,可是如果我的字符串中有空多个格咋办?还有此方法得出的结果就不准确了啊,没事,咱不是有正则表达式呢吗?\s匹配的就是任何Unicode空格符,咱怕啥?

/*
使用正则表达式\s+一个或多个空格来分隔字符串
my
home
page
is
http://www.xiaoxiaozi.com
*/

var str = 'my home page is   http://www.xiaoxiaozi.com';
var result = str.split(/\s+/);
for ( i in result)
{
        document.write(result[i] + "<br/>");
}

唠叨及总结:

呼,这一篇又写了好长,不过写到这也快完事了,哈。前面讲的正则表达式相当于钓鱼的工具,今天讲的这两篇(稍候还有一篇)讲的是钓鱼的方法,只有用适当的方法结合实用的工具才会钓上鱼。祝大家周末愉快。

文章作者:simaopig
本文地址:http://www.xiaoxiaozi.com/2009/08/16/1351/
版权所有 © 转载时必须以链接形式注明作者和原始出处!

5 Responses to “JavaScript 用于模式匹配的 String 方法”

  1. #1 要饭的 回复 | 引用 Post:2009-08-16 13:38

    正则是我最不会用的东西

    [回复]

  2. #2 simaopig 回复 | 引用 Post:2009-08-16 13:45

    @要饭的
    我也不会啊,要是会的话就不学了啊。

    [回复]

  3. #3 小Bee 回复 | 引用 Post:2009-08-17 12:39

    哎..这个要学学…

    [回复]

  4. #4 Showfom 回复 | 引用 Post:2009-08-17 15:41

    太 他妈 深奥了

    [回复]

  5. #5 peichen 回复 | 引用 Post:2009-08-19 11:21

    :roll: 正则表达式确实很强大~~

    边做边学了

    [回复]

发表评论

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)