JS的replace方法

 更新时间:2013年12月09日 15:56:39   作者:  
在javascript中,String的函数replace()简直太让人喜爱了。它灵活而强大的字符替换处理能力,这里简单介绍下,方便需要的朋友

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

语法
stringObject.replace(regexp/substr,replacement)

参数 描述
regexp/substr

必需。规定子字符串或要替换的模式的 RegExp 对象。

请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。

replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。

返回值

一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

说明

字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。

replacement 可以是字符串,也可以是函数。如果它是字符串,那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示,它说明从模式匹配得到的字符串将用于替换。

字符 替换文本
$1、$2、...、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$& 与 regexp 相匹配的子串。
$` 位于匹配子串左侧的文本。
$' 位于匹配子串右侧的文本。
$$ 直接量符号。

注意:ECMAScript v3 规定,replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串,可以有 0 个或多个这样的参数。接下来的参数是一个整数,声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

更多基础实例可以到这里查看:https://www.jb51.net/w3school/js/jsref_replace.htm

replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数 是与模式中的子表达式匹配的字符串,可以有 0 个或多个这样的参数。接下来的参数是一个整数,声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

下文展示了几种javascript正则表示式的repalce方式,有些方式我们很少在别的地方看到,如第二种和第三方中方法。

复制代码 代码如下:

//下面的例子用来获取url的两个参数,并返回urlRewrite之前的真实Url
var reg=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
var url="http://www.qidian.com/BookReader/1017141,20361055.aspx";

//方式一,最简单常用的方式
var rep=url.replace(reg,"$1ShowBook.aspx?bookId=$2&chapterId=$3");
alert(rep);

//方式二 ,采用固定参数的回调函数
var rep2=url.replace(reg,function(m,p1,p2,p3){return p1+"ShowBook.aspx?bookId="+p3+"&chapterId="+p3});
alert(rep2);

//方式三,采用非固定参数的回调函数
var rep3=url.replace(reg,function(){var args=arguments; return args[1]+"ShowBook.aspx?bookId="+args[2]+"&chapterId="+args[3];});
alert(rep3);


//方法四
//方式四和方法三很类似, 除了返回替换后的字符串外,还可以单独获取参数

[code]
var bookId;
var chapterId;
function capText()
{
    var args=arguments;
    bookId=args[2];
    chapterId=args[3];
    return args[1]+"ShowBook.aspx?bookId="+args[2]+"&chapterId="+args[3];
}

var rep4=url.replace(reg,capText);
alert(rep4);
alert(bookId);
alert(chapterId);


//除了使用replace方法获取正则表示式的分组外,还可以使用test ,exec方法获取分组,只是手法有所不同而已
var reg2=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
var m=reg2.exec("http://www.qidian.com/BookReader/1017141,20361055.aspx");
var s="";
//获取所有的分组
for (i = 0; i < m.length; i++) {
      s = s + m[i] + "\n";     
      }
alert(s);

bookId=m[2];
chapterId=m[3];
alert(bookId);
alert(chapterId);


//使用test方法获取分组
var reg3=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
reg3.test("http://www.qidian.com/BookReader/1017141,20361055.aspx");
//获取三个分组
alert(RegExp.$1);
alert(RegExp.$2);
alert(RegExp.$3);

    var str="www.baidu.com";
        //str.format("好","q")       
        str.replace(new RegExp("(\\.)(bai)du","g"),function(){           
            for(var i=0;i<arguments.length;i++)
            {
                    document.write(arguments[i]+"<br/>");
            }
            document.write("-------------------------------------------------<br/>");
        });

 两个例子(证明,replace传入正则参数和字符传参数结果不同):

alert("123".replace("1",function(){var un;return un;}));  //弹出undefined23
alert("123".replace(new RegExp("1"),function(){var un;return un;}));  //弹出23

一些实例介绍:


replace()最简单的算是能力就是简单的字符替换。例如:


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


我想大家运行后可以看到结果,它只替换了首字母。但如果加上正则表达式结果就不一样了!replace()支持正则表达式,它可以按照正则表达式的规则匹配字符或字符串,然后给予替换!


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


但是结果还是没有更改,如果您熟悉正则,那这就难不住您。稍加修改就OK了。

复制代码 代码如下:

<script language="javascript">
var strM = "javascript is a good script language";
//在此将字母a全部替换成字母A
alert(strM.replace(/a/g,"A"));
</script>


还可以这样,看看效果!

复制代码 代码如下:

<script language="javascript">
var strM = "javascript is a good script language";
alert(strM.replace(/(javascript)\s*(is)/g,"$1 $2 fun. it $2"));
</script>


  我这儿举的例子都是很简单的应用,replace()在此点上与您使用正则表达式的能力成正比。您正则表达式越强,呵呵,那您就会越疯狂的爱上它。
  当然,我这儿推荐replace()的原因并不因为它能与正则表达式合作,而在于它还能与函数进行合作,发挥出强大的功能。
  先看看简单例子:将所有单词首字母换成大写。

复制代码 代码如下:

<script language="javascript">
var strM = "javascript is a good script language";
function change(word)
{
 return word.indexOf(0).toUpperCase()+word.substring(1);
}
alert(strM.replace(/\b\w+\b/g,change));
</script>


  由上可知,当正则表达式有"g"标志时,代表将处理整个字符串,即函数change的变换将应用于所有匹配的对象。而该函数有三个或更多参数,具体个数视正则表达式而定。
  有了函数与正则表达式的配合,replace()处理字符串的功能空前强大起来了!
  最后还举个例子,将字符串所有单词倒序,用replace()处理是如此简单。

复制代码 代码如下:

<script language="javascript">
var strM = "javascript is a good script language";
function change(word)
{
 var result = word.match(/(\w)/g);
if ( result )
{
 var str = "";
  for ( var i=result.length-1; i>=0; i-- )
 {
   str += result;
 } return str;
}
else
{
  return "null";
}
}
alert(strM.replace(/\b(\w)+\b/g,change));
</script>

相关文章

  • JS中数组常用的循环遍历你会几种

    JS中数组常用的循环遍历你会几种

    JS 遍历数组(循环数组)的方式有多种,但你都知道吗?下面这篇文章主要给大家介绍了关于JS中数组常用循环遍历的相关资料,需要的朋友可以参考下
    2021-06-06
  • switch语句的妙用(必看篇)

    switch语句的妙用(必看篇)

    下面小编就为大家带来一篇switch语句的妙用(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS从一组数据中找到指定的单条数据的方法

    JS从一组数据中找到指定的单条数据的方法

    这篇文章给大家介绍基于js如何从一组数据中找到指定的单条数据,非常实用,实现方案也很简单,需要的朋友可以参考下
    2016-06-06
  • 向大师们学习Javascript(视频与PPT)

    向大师们学习Javascript(视频与PPT)

    在开始之前,先与大家一起认识下这篇文章的主角,世界级的javascript大牛们:Douglas Crockford、John Resig、Peter-Paul Koch、Nicolas C. Zakas。看名字也许挺陌生,但是如果你对javascript还算熟悉,一定不会对他们的作品陌生。
    2009-12-12
  • js事件委托和事件代理案例分享

    js事件委托和事件代理案例分享

    这篇文章主要为大家分享了js事件委托和事件代理案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 通过示例演示理解javascript预解析

    通过示例演示理解javascript预解析

    这篇文章主要为大家介绍了通过示例演示理解javascript预解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-03-03
  • Javascript 判断两个IP是否在同一网段实例代码

    Javascript 判断两个IP是否在同一网段实例代码

    javascript功能的强大之处是我们大家有目共睹的,几天小编向大家介绍Javascript 判断两个IP是否在同一网段,感兴趣的朋友可以参考一下
    2016-11-11
  • js实现异步循环实现代码

    js实现异步循环实现代码

    这篇文章主要介绍了js实现异步循环实现代码,需要的朋友可以参考下
    2016-02-02
  • JavaScript实现拖拽排序的方法详解

    JavaScript实现拖拽排序的方法详解

    可拖拽排序的菜单效果大家想必都很熟悉,本次我们通过一个可拖拽排序的九宫格案例来演示其实现原理,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-05-05
  • 微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解

    微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解

    这篇文章主要介绍了微信小程序分类菜单激活状态跟随列表滚动自动切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01

最新评论