js中replace的用法

replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串。。为了帮助大家更好的理解,下面举个简单例子说明一下 

Js代码
  1. <script language="javascript">   
  2. var stringObj="终古人民共和国,终古人民";   
  3.   
  4. //替换错别字“终古”为“中国”   
  5. //并返回替换后的新字符   
  6. //原字符串stringObj的值没有改变   
  7. var newstr=stringObj.replace("终古","中国");   
  8. alert(newstr);   
  9. </script>  



    比我聪明的你,看完上面的例子之后,会发现第二个错别字“终古”并没有被替换成“中国”,我们可以执行二次replace方法把第二个错别字“终古”也替换掉,程序经过改进之后如下:

Js代码
  1. <script language="javascript">   
  2. var stringObj="终古人民共和国,终古人民";   
  3.   
  4. //替换错别字“终古”为“中国”   
  5. //并返回替换后的新字符   
  6. //原字符串stringObj的值没有改变   
  7. var newstr=stringObj.replace("终古","中国");   
  8.   
  9. newstr=newstr.replace("终古","中国");   
  10. alert(newstr);   
  11. </script>  


    我们可以仔细的想一下,如果有N的N次方个错别字,是不是也要执行N的N次方replace方法来替换掉错别字呢??呵,不用怕,有了正则表达式之后不用一个错别字要执行一次replace方法。。程序经过改进之后的代码如下 

Js代码
  1. <script language="javascript">   
  2. var reg=new RegExp("终古","g"); //创建正则RegExp对象   
  3. var stringObj="终古人民共和国,终古人民";   
  4. var newstr=stringObj.replace(reg,"中国");   
  5. alert(newstr);   
  6. </script>  


上面讲的是replace方法最简单的应用,不知道大家有没有看懂??下面开始讲稍微复杂一点的应用。。 


    大家在一些网站上搜索文章的时候,会发现这么一个现象,就是搜索的关键字会高亮改变颜色显示出来??这是怎么实现的呢??其实我们可以用正则表达式来实现,具体怎么样实现呢?简单的原理请看下面的代码

Js代码
  1. <script language="javascript">   
  2. var str="中华人民共和国,中华人民共和国";   
  3. var newstr=str.replace(/(人)/g,"<font color=red>$1</font>");   
  4. document.write(newstr);   
  5. </script>  


上面的程序缺少互动性,我们再改进一下程序,实现可以自主输入要查找的字符

Js代码
  1. <script language="javascript">   
  2. var s=prompt("请输入在查找的字符","人");   
  3. var reg=new RegExp("("+s+")","g");   
  4. var str="中华人民共和国,中华人民共和国";   
  5. var newstr=str.replace(reg,"<font color=red>$1</font>");   
  6. document.write(newstr);   
  7. </script>  


  可能大家都会对$1这个特殊字符表示什么意思不是很理解,其实$1表示的就是左边表达式中括号内的字符,即第一个子匹配,同理可得$2表示第二个子匹配。。什么是子匹配呢??通俗点讲,就是左边每一个括号是第一个字匹配,第二个括号是第二个子匹配。。 


   当我们要把查找到的字符进行运算的时候,怎么样实现呢??在实现之前,我们先讲一下怎么样获取某一个函数的参数。。在函数Function的内部,有一个arguments集合,这个集合存储了当前函数的所有参数,通过arguments可以获取到函数的所有参数,为了大家理解,请看下面的代码

Js代码
  1. <script language="javascript">   
  2. function test(){   
  3.    alert("参数个数:"+arguments.length);   
  4.    alert("每一个参数的值:"+arguments[0]);   
  5.    alert("第二个参数的值"+arguments[1]);   
  6.   //可以用for循环读取所有的参数   
  7. }   
  8.   
  9. test("aa","bb","cc");   
  10. </script>  



看懂上面的程序之后,我们再来看下面一个有趣的程序

Js代码
  1. <script language="javascript">   
  2. var reg=new RegExp("\\d","g");   
  3. var str="abd1afa4sdf";   
  4. str.replace(reg,function(){alert(arguments.length);});   
  5. </script>  


     我们惊奇的发现,匿名函数竟然被执行了二次,并且在函数里还带有三个参数,为什么会执行二次呢??这个很容易想到,因为我们写的正则表达式是匹配单个数字的,而被检测的字符串刚好也有二个数字,故匿名函数被执行了二次。。在匿名函数内部的那三个参数到底是什么内容呢??为了弄清这个问题,我们看下面的代码。

Js代码
  1. <script language="javascript">   
  2. function test(){   
  3. for(var i=0;i<arguments.length;i++){   
  4.     alert("第"+(i+1)+"个参数的值:"+arguments[i]);   
  5. }   
  6. }   
  7. var reg=new RegExp("\\d","g");   
  8. var str="abd1afa4sdf";   
  9. str.replace(reg,test);   
  10. </script>  


     经过观察我们发现,第一个参数表示匹配到的字符,第二个参数表示匹配时的字符最小索引位置(RegExp.index),第三个参数表示被匹配的字符串(RegExp.input)。其实这些参数的个数,还会随着子匹配的变多而变多的。弄清这些问题之后,我们可以用另外的一种写法

Js代码
  1. <script language="javascript">   
  2. function test($1){   
  3.   return "<font color='red'>"+$1+"</font>"  
  4. }   
  5. var s=prompt("请输入在查找的字符","人");   
  6. var reg=new RegExp("("+s+")","g");   
  7. var str="中华人民共和国,中华人民共和国";   
  8. var newstr=str.replace(reg,test);   
  9. document.write(newstr);   
  10. </script>  


看了上面的程序,原来可以对匹配到的字符为所欲为。下面简单举一个应用的例子

Js代码
  1. <script language="javascript">   
  2. var str="他今年22岁,她今年20岁,他的爸爸今年45岁,她的爸爸今年44岁,一共有4人"  
  3. function test($1){   
  4.   var gyear=(new Date()).getYear()-parseInt($1)+1;   
  5.   return $1+"("+gyear+"年出生)";   
  6. }   
  7. var reg=new RegExp("(\\d+)岁","g");   
  8. var newstr=str.replace(reg,test);   
  9. alert(str);   
  10. alert(newstr);   
  11. </script>  

转载于:https://www.cnblogs.com/ranzige/p/4036436.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406959.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ospf 单区域配置

在骨干区域(eare0)中:配置方法:router ospf 进程号如:10network 加 你想宣告的网段 反向子网掩码 area 加id 号假如是在路由器的接口ip 是 192.168.1.1 和192.168.2.1 在area 0 中 router ospf 10network 192.168.1.0 0.0.0.255 area 0network 192.168.2.0 0.0.0.255 area 0就可…

javascript学习系列(25):数组中的substr

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说s…

CSS 相对|绝对(relative/absolute)定位系列(三)

1. absolute与等高布局 拿简单的两栏布局举例&#xff0c;左栏与右栏有不同的背景色&#xff0c;且中间隔边框线分隔&#xff0c;如何实现&#xff1f;因为随着内容的不同&#xff0c;有可能左侧栏高度较高&#xff0c;也有可能是右侧栏高度较高。所以&#xff0c;要实现无缝的…

CPUID详解[增加TLB与Cache]

From: http://bbs.pediy.com/showthread.php?threadid21646 标 题:CPUID详解[增加TLB与Cache]作 者: Pr0Zel 时 间: 2006-02-21,22:00:23 链 接: http://bbs.pediy.com/showthread.php?t21646 这是文章最后一次更新,加入了TLB与Cache信息等资料前言:论坛上面有人不明白CPUID指…

2009年5月软件设计师考前预测试题及考点解析

更多试题及要点解析请参见《软件设计师考试考前冲刺预测试卷及考点解析》、《应试捷径--典型考题解析与考点贯通(系统分析师考试)》&#xff0c;不断更新中&#xff0c;敬请持续关注&#xff01;

纯CSS实现侧边栏/分栏高度自动相等

一、为何要分栏高度一致&#xff1f; 分栏高度一致的目的是更加美观。举两个例子吧 2.1 对于分栏布局&#xff0c;我们或许会用边框(border)进行分隔&#xff0c;就如鄙人博客的分栏 此时最担心的问题就是高度不一致&#xff0c;尤其是无边框属性的分栏高度超过有边框属性的分…

论调用约定__stdcall,__cdecl,__fastcall,thiscall,naked call

From: http://blog.vckbase.com/arong/archive/2004/06/09/409.aspx 在C语言中&#xff0c;假设我们有这样的一个函数&#xff1a; int function(int a,int b) 调用时只要用result function(1,2)这样的方式就可以使用这个函数。但是&#xff0c;当高级语言被编译成计算机可以…

gitservergitlab之搭建和使用

gitserver比較有名的是gitosis和gitolite&#xff0c;这两个管理和使用起来略微有些复杂&#xff0c;没有web页面&#xff0c;而gitlab则是类似于github的一个工具&#xff0c;github无法免费建立私有仓库&#xff0c;而且为了代码安全&#xff0c;于是在内网安装了一个自己实验…

菜鸟学习javascript实例教程

1、用JS显示文字的例子&#xff1a; <html> <body> <script type"text/javascript"> document.write("Hello World!") </script> </body> </html> 2、用HTML标签来格式化文本的例子&#xff1a; <html> <bod…

推荐!国外程序员整理的 C++ 资源大全(转载)

关于 C 框架、库和资源的一些汇总列表&#xff0c;由 fffaraz 发起和维护。 内容包括&#xff1a;标准库、Web应用框架、人工智能、数据库、图片处理、机器学习、日志、代码分析等。 标准库 C标准库&#xff0c;包括了STL容器&#xff0c;算法和函数等。 C Standard Library&am…

CSS布局奇淫巧计之-强大的负边距

负的边距好像能减小元素在文档流中的尺寸一样&#xff0c;但事实上&#xff0c;它的尺寸大小并没变&#xff0c;只是文档流在计算元素位置的时候&#xff0c;会认为负边距把元素的尺寸减小了&#xff0c;因此位置也就发生变化了。 实例&#xff1a; 因为P为block元素且没有指定…

格式化网上复制过来的源代码

背景&#xff1a; 当我们从网上复制一些源代码到本机的时候&#xff0c;一定会带上一些非常规字符(特殊字符)&#xff0c;为了让源代码更规范&#xff0c;我们一般需要作一些处理&#xff1a; 1. 将连续的多个空格、制表符压缩成一个 2. 删除行尾多余的空格或制表符 3. 将每…

[NHibernate] NHibernate对象关系映射工具了解

NHibernate是把Java的Hibernate核心部分移植到Microsoft .NET Framework上。它是一个对象关系映射工具&#xff0c;其目标是把.NET对象持久化到关系数据库。 NHibernate 是一个面向.NET 环境的对象/关系数据库映射工具。对象关系映射(O/R Mapping&#xff0c;Object Relational…

获取硬盘总容量,柱面数,磁道数,扇区数

下面的代码来自MSDN #include <stdio.h> #include <windows.h> #include <winioctl.h>BOOL GetDriveGeometry(DISK_GEOMETRY *pdg) {HANDLE hDevice; // handle to the drive to be examined BOOL bResult; // results flagD…

改变CSS世界纵横规则的writing-mode属性

1. writing-mode的原本作用 和float属性有些类似&#xff0c;writing-mode原本设计的是控制内联元素的显示的&#xff08;即所谓的文本布局-Text Layout&#xff09;。因为在亚洲&#xff0c;尤其像中国这样的东亚国家&#xff0c;存在文字的排版不是水平式的&#xff0c;而是…

IOS中定时器NSTimer的开启与关闭

调用一次计时器方法&#xff1a; [cpp] view plaincopymyTimer [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:selector(scrollTimer) userInfo:nil repeats:NO]; //不重复&#xff0c;只调用一次。timer运行一次就会自动停止运行 重复调用计时器方法&…

Linux-在linux修改文件夹及其子文件夹的权限

现在这会写一个命令吧&#xff0c;之前命令都忘记了 今天突然用起来 感觉都不会用了 加入-R 参数&#xff0c;就可以将读写权限传递给子文件夹 例如chmod -R 777 /public_html 那么public_html文件夹和它下面的所有子文件夹的属性都变成了777. 777是读、写、执行权限…