Javascript中replace()小结


Posted in Javascript onSeptember 30, 2015

关于定义

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

关于语法

stringObject.replace(regexp/substr,replacement)

关于参数

参数 描述
regexp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。
replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。

1、第一个参数regexp/substr,使用正则表达式时用全局标识符g,可以替换所有匹配的子串,否则只会匹配一次。

    例如:

var str = "aaaaa"; 
var str1 = str.replace("a", "b");
var str2 = str.replace(/a/g, "b");

  运行结果: str1 -> "baaaa",str2 -> "bbbbb"

2、第二个参数replacement,可以是字符串或者function,也可以是$字符具有的特定的含义。

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

   a. function的例子:

var str = "111222aa";
str.replace(/(\d{3})/g, function(word){
 return "b";
});

     运行结果: "bbaa"

    b. $的例子

var str = "1234567890";
str.replace( /(\d{3})(\d{3})(\d{4})/g, "$1-$2-$3" );

     运行结果: "123-456-7890"

注: 大多时候是利用regexp和$的结合来实现需求,所以知道一些基本的正则表达式规则是有必要的。

字符串替换字符串

'I am loser!'.replace('loser','hero')

//I am hero!
直接使用字符串能让自己从loser变成hero,但是如果有2个loser就不能一起变成hero了。

'I am loser,You are loser'.replace('loser','hero');
//I am hero,You are loser

正则表达式替换为字符串

'I am loser,You are loser'.replace(/loser/g,'hero')
//I am hero,You are hero

使用正则表达式,并将正则的global属性改为true则可以让所有loser都变为hero

有趣的替换字符

replaceValue可以是字符串。如果字符串中有几个特定字符的话,会被转换为特定字符串。

字符 替换文本
$& 与正则相匹配的字符串
$` 匹配字符串左边的字符
$' 匹配字符串右边的字符
$1,$2,$,3,…,$n 匹配结果中对应的分组匹配结果
使用$&字符给匹配字符加大括号

var sStr='讨论一下正则表达式中的replace的用法';
sStr.replace(/正则表达式/,'{$&}');
//讨论一下{正则表达式}中的replace的用法
使用$`和$'字符替换内容

'abc'.replace(/b/,"$`");
//aac
'abc'.replace(/b/,"$'");
//acc
使用分组匹配组合新的字符串

'nimojs@126.com'.replace(/(.+)(@)(.*)/,"$2$1")
//@nimojs
replaceValue参数可以是一个函数

StringObject.replace(searchValue,replaceValue)中的replaceValue可以是一个函数.
如果replaceValue是一个函数的话那么,这个函数的arguments会有n+3个参数(n为正则匹配到的次数)

先看例子帮助理解:

function logArguments(){ 
 console.log(arguments);
//["nimojs@126.com", "nimojs", "@", "126.com", 0, "nimojs@126.com"] 
 return '返回值会替换掉匹配到的目标'
}
console.log(
 'nimojs@126.com'.replace(/(.+)(@)(.*)/,logArguments)
)

参数分别为

匹配到的字符串(此例为nimojs@126.com,推荐修改上面代码的正则来查看匹配到的字符帮助理解)
如果正则使用了分组匹配就为多个否则无此参数。(此例的参数就分别为”nimojs”, “@”, “126.com”。推荐修改正则为/nimo/查看控制台中返回的arguments值)
匹配字符串的对应索引位置(此例为0)
原始字符串(此例为nimojs@126.com)
使用自定义函数将A-G字符串改为小写

'JAVASCRIPT'.replace(/[A-G]/g,function(){
 return arguments[0].toLowerCase();
})
//JaVaScRIPT

使用自定义函数做回调式替换将行内样式中的单引号删除

'<span style="font-family:\'微软雅黑\';">demo</span>'.replace(/\'[^']+\'/g,function(){  
 var sResult=arguments[0];
 console.log(sResult);//'微软雅黑'
 sResult=sResult.replace(/\'/g,'');
 console.log(sResult);
//微软雅黑
 return sResult;
})
//<span style="font-family:微软雅黑;">demo</span>
Javascript 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
javascript基本类型详解
Nov 28 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 #Javascript
谈谈JavaScript异步函数发展历程
Sep 29 #Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 #Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 #Javascript
jQuery中的ajax async同步和异步详解
Sep 29 #Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 #Javascript
pace.js页面加载进度条插件
Sep 29 #Javascript
You might like
php实现天干地支计算器示例
2014/03/14 PHP
php中session使用示例
2014/03/29 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
python中定义结构体的方法
2013/03/04 Python
Python内置函数dir详解
2015/04/14 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
python re的findall和finditer的区别详解
2020/11/15 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
物理力学求职信
2014/02/18 职场文书
总经理助理的职责
2014/03/14 职场文书
国旗下的演讲稿
2014/05/08 职场文书
企业消防安全责任书
2014/07/23 职场文书
交通事故起诉书
2015/05/19 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS