replace() 方法的第二个参数可以使用函数,当匹配时会调用该函数,函数的返回值将作为替换文本使用,同时函数可以接收以$为前缀的特殊字符,用来引用匹配文本的相关信息。

约定字符串 说明
$1、$2、…、$99 与正则表达式中的第 1~99 个子表达式相匹配的文本
$&(美元符号+连字符) 与正则表达式相匹配的子字符串
$’(美元符号+切换技能键) 位于匹配子字符串左侧的文本
$’(美元符号+单引号) 位于匹配字符串右侧的文本
$$ 表示 $ 字符串

示例1

下面代码把字符串中每个单词转换为首字母大写形式显示。

  1. var s = 'javascript is script , is not java.'; //定义字符串
  2. //定义替换文本函数,参数为第一个子表达式匹配文本
  3. var f = function ($1) {
  4. //把匹配文本的首字母转换为大写
  5. return $1.substring(0,1).toUpperCase() + $1.substring(1).toLowerCase();}
  6. var a = s.replace(/(\b\w+\b)/g, f); //匹配文本并进行替换
  7. console.log(a); //返回字符串“JavaScript Is Script , Is Not Java.”

在上面示例中替换函数的参数为特殊字符“$1”,它表示正则表达式 /(\b\w+\b)/ 中小括号匹配的文本,然后在函数结构内对这个匹配文本进行处理,截取其首字母并转换为大写形式,余下字符全为小写,然后返回新处理的字符串。replace() 方法是在原文本中使用这个返回的新字符串替换掉每次匹配的子字符串。

示例2

对于上面的示例还可以进一步延伸,使用小括号来获取更多匹配信息。例如,直接利用小括号传递单词的首字母,然后进行大小写转换处理,处理结果都是一样的。

  1. var s = 'javascript is script , is not java.'; //定义字符串
  2. var f = function ($1,$2,$3) { //定义替换文本函数,请注意参数的变化
  3. return $2.toUpperCase() + $3;
  4. }
  5. var a = s.replace(/(\b\w+\b)/g, f);
  6. console.log(a);

在函数 f() 中,第一个参数表示每次匹配的文本,第二个参数表示第一个小括号的子表达式所匹配的文本,即单词的首字母,第二个参数表示第二个小括号的子表达式所匹配的文本。

replace() 方法的第二个参数是一个函数,replace() 方法会给它传递多个实参,这些实参都包含一定的意思,具体说明如下。

  • 第一个参数表示与匹配模式相匹配的文本,如上面示例中每次匹配的单词字符串。
  • 其后的参数是与匹配模式中子表达式相匹配的字符串,参数个数不限,根据子表达式数而定。
  • 后面的参数是一个整数,表示匹配文本在字符串中的下标位置。
  • 最后一个参数表示字符串自身。

示例3

把上面示例中替换文本函数改为如下形式。

  1. var f = function() {
  2. return arguments[1].toUpperCase() + arguments[2];
  3. }

也就是说,如果不为函数传递形参,直接调用函数的 arguments 属性同样能够读取到正则表达式中相关匹配文本的信息。其中:

  • arguments[0]:表示每次匹配的文本,即单词。
  • arguments[1]:表示第一个子表达式匹配的文本,即单词的首个字母。
  • arguments[2]:表示第二个子表达式匹配的文本,即单词的余下字母。
  • arguments[3]:表示匹配文本的下标位置,如第一个匹配单词“javascript”的下标位置就是0,以此类推。
  • arguments[4]:表示要执行匹配的字符串,这里表示“javascript is script , is not java.”。

示例4

下面代码利用函数的 arguments 对象主动获取 replace() 方法的第一个参数中正则表达式所匹配的详细信息。

  1. var s = 'javascript is script , is not java.'; //定义字符串
  2. var f = function () {
  3. for (var i = 0; i < arguments.length; i++) {
  4. console.log("第" + (i + 1) + "个参数的值:"+ arguments[i]);
  5. }
  6. console.log("-----------------------------");
  7. }
  8. var a = s.replace(/(\b\w+\b)/g, f);

在函数结构体中,使用 for 循环结构遍历 arguments 属性时,发现每次匹配单词时,都会弹出 5 次提示信息,分别显示上面所列的匹配文本信息。其中,arguments[1]、arguments[2] 会根据每次匹配文本的不同,分别显示当前匹配文本中子表达式匹配的信息,arguments[3] 显示当前匹配单词的下标位置。而 arguments[0] 总是显示每次匹配的单词,arguments[4] 总是显示被操作的字符串。

示例5

下面代码设计从服务器端读取学生成绩(JSON格式),然后使用 for 语句把所有数据转换为字符串。再来练习自动提取字符串中的分数,并汇总、算出平均分。最后,利用 replace() 方法提取每个分值,与平均分进行比较以决定替换文本的具体信息。

  1. var scope = {
  2. "张三" : 56,
  3. "李四" : 76,
  4. "王五" : 87,
  5. "赵六" : 98
  6. }, _scope = "";
  7. for (var id in scope) { //把JSON数据转换为字符串
  8. _scope += id + scope[id];
  9. }
  10. var a = _scope.match(/\d+/g), sum = 0; //匹配出所有分值,输出位数组
  11. for (var i = 0; i <a.length; i++) { //遍历数组,求总分
  12. sum += parseFloat(a[i]); //把元素值转换为数值后递加
  13. };
  14. var avg = sum / a.length; //求平均分
  15. function f() {
  16. var n = parseFloat(arguments[1]); //把匹配的分数转换为数值,第一个子表达式
  17. return ":" + n + "分" + "(" + ((n > avg) ? ("超出平均分" + (n - avg)) :
  18. ("低于平均分" + (avg - n))) + "分)<br>"; //设计替换文本的内容
  19. }
  20. var s1 = _scope.replace(/(\b\w+\b)/g, f); //执行匹配、替换操作
  21. document.write(s1);

运行结果如下:

遍历数组时不能使用 for/in 语句因为数组中还存储有其他相关的匹配文本信息。应该使用 for 结构来实现。由于截取的数字都是字符串类型,应该把它们都转换为数值类型,再把数字连接在一起,或者按字母顺序进行比较等。

JS字符串替换(使用replace()方法)相关推荐

  1. new Date将字符串转化成日期格式 兼容IE,ie8如何通过new Date将字符串转化成日期格式,js中如何进行字符串替换, replace() 方法详解

    new Date将字符串转化成日期格式 兼容IE,ie8如何通过new Date将字符串转化成日期格式,js中如何进行字符串替换, replace() 方法详解 //获得年月日时分秒 //传入日期// ...

  2. JS字符串截取方法 JS字符串查找指定字符方法 JS字符串替换指定字符方法 JS字符串插入指定位置方法 JS字符串删除指定字符方法

    js字符串截取的方法 方法一: str.slice(开始位置,结束位置) //start 参数字符串中第一个字符位置为 0, 第二个字符位置为 1, 以此类推,如果是负数表示从尾部截取多少个字符串,s ...

  3. JS字符串替换函数全部替换方法

    JS字符串替换函数全部替换方法 正则表达式浏览器HTML  JS字符串替换函数:Replace("字符串1″, "字符串2″), 1.我们都知道JS中字符串替换函数是Replace ...

  4. JS 字符串替换特定子串

    JS 字符串替换函数-replace 前言 基本说明 定义与语法 返回值 说明 拓展说明1 java中的字符替换操作 JS实现全替换的效果 拓展说明2 replacement 是字符串时 replac ...

  5. js中match、replace方法中使用正则表达式

    为什么80%的码农都做不了架构师?>>>    js中match.replace方法中使用正则表达式 (2012-06-29 14:23:37) 转载▼ 标签: 字符串 飞雪 正则表 ...

  6. JS字符串替换所有的某个字符

    要实现js字符串替换所有的某个字符,推荐大家使用replaceAll方法,replaceAll是用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串,该函数会替换所有匹配到的子字符 ...

  7. js 字符串替换的问题

    1 <html> 2 <head> 3 <title>js 字符串替换问题</title> 4 <meta http-equiv="co ...

  8. java字符替换函数示例_Java字符串替换函数replace()用法解析

    Java字符串替换函数replace()用法解析 这篇文章主要介绍了Java字符串替换函数replace()用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的 ...

  9. JSPatch实现原理详解:让JS调用/替换任意OC方法

    JSPatch实现原理详解:让JS调用/替换任意OC方法 2015-07-10 09:05 编辑: suiling 分类:iOS开发 来源:bang JSPatch以小巧的体积做到了让JS调用/替换任 ...

  10. c语言作业 字符串替换,C语言字符串替换。解决方法

    当前位置:我的异常网» C语言 » C语言字符串替换.解决方法 C语言字符串替换.解决方法 www.myexceptions.net  网友分享于:2015-04-14  浏览:0次 C语言字符串替换 ...

最新文章

  1. 使用微信开发者工具创建小程序项目
  2. java修改cookie的值_Java 对 Cookie增删改查的实现示例
  3. 【转】C++ Vector(向量容器)
  4. 德州职业技术学院计算机系,德州职业技术学院计算机系元旦晚会相声视频
  5. bzoj3144: [Hnoi2013]切糕(最小割)
  6. Android系统匿名共享内存Ashmem(Anonymous Shared Memory)在进程间共享的原理分析
  7. Hadoop2之NameNode HA详解
  8. 汇编:用户登录以及简单数据加密
  9. 2018-2019-1 20165320 20165325 20165337 实验一 开发环境的熟悉
  10. laravel知识点: 了解应用环境
  11. 2018 “百度之星”程序设计大赛 - 初赛(A)P1002度度熊学队列(双端队列模拟,STL)
  12. 太开放计算机软件快上课,[计算机软件及应用]CAXA电子图版上课.ppt
  13. php 做批量打印二维码,php语言开发的网站,如何实现批量打印快递单的功能?
  14. MD5算法是否可逆?
  15. 7-12 输出大写英文字母 (15 分)
  16. 蓝桥杯 18总决赛 A2 方阵阅兵(暴力)
  17. 动植物代谢最新研究进展(2021年7月)
  18. 频域串联滞后校正matlab,基于MATLAB的串联超前校正、滞后校正和串联滞后-超前校正设计.pdf...
  19. 启用群晖 Drive 的团队文件夹
  20. winSCP 集成PuTTY附下载

热门文章

  1. linux系统重启 查看日志及历史记录
  2. 零售版和批量授权版有什么区别?
  3. 浅谈什么是前端SEO
  4. 【Skill】提取 Line 表情包方法
  5. 2011年.NET面试题总结---献给即将找工作的同行们
  6. 周六福老庙等35批次黄金抽检不合格,你的饰品标签贴对了吗?
  7. 2022数字健康展,医养健康展,胶原蛋白肽展,中国氢健康展会
  8. matlab 贝叶斯信息标准_如何用matlab的BNT软建立一个贝叶斯网络及条件概率表
  9. 资深老师讲解CAD中的旋转命令,值得一学!
  10. 昂达11Pro如何安装Android,折腾下战三年,11款Macbook Pro安装Catalina步骤指南