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. Nginx反向代理多个应用时,通过BluePring使Flask支持二级路径(URL前缀)
  2. [moka同学笔记]PHP操作Redis收集
  3. mac或linux下JDBC的简单实现,图文介绍(附测试源码)
  4. 如何实现文字翻译,这个技巧你需要掌握
  5. java io系统_java中的io系统详解
  6. mongodb 索引建立问题
  7. 这些年我对微服务的理解
  8. [原创]java WEB学习笔记71:Struts2 学习之路-- struts2常见的内建验证程序及注意点,短路验证,非字段验证,错误消息的重用...
  9. (68)Vue-cli 目录与文件
  10. 动态规划基础——爬楼梯(Leetcode 70)
  11. Cent OS home下中文目录改成英文目录
  12. 金立旗下18辆车产被司法拍卖 成交额近500万元
  13. 蓝桥杯 ADV-105 算法提高 不同单词个数统计
  14. TIBCO Rendezvous
  15. 给联想拯救者15isk装win7遇到的问题
  16. 入门级磁带机使用方法
  17. RT-Thread 驱动 PIN 设备
  18. 师从施一公,从造纸工人到清华教授,CNS12篇,柴继杰再发Science
  19. js 正则表达式大全
  20. 数据库客户端DBeaver官网下载地址

热门文章

  1. 钛媒体独家对话张建锋:钉钉的低代码革命
  2. 移动端h5开发,华为手机输入法键盘影响页面布局的问题。
  3. Python学习-基础篇9 mysql相关
  4. 30年前竟是一家?Intel/AMD CPU的那些事
  5. python猜单词小游戏
  6. 利物浦新援因冲撞失忆 渣叔:他什么都不记得
  7. 关于es的一些默认限制解除
  8. postgresql安装postgis插件并导入数据
  9. linux系统怎么跑显卡,Linux系统怎么配置双显卡?
  10. AE导出视频闪屏怎么办?解决方法送上