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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
javascript闭包的理解
Apr 01 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
利用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 网上商城促销设计实例代码
2012/02/17 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
Python聚类算法之基本K均值实例详解
2015/11/20 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python实现控制台打印的方法
2019/01/12 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
python 模拟登陆github的示例
2020/12/04 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
园长自我鉴定
2013/10/06 职场文书
酒店员工检讨书
2014/02/18 职场文书
西安大雁塔导游词
2015/02/10 职场文书
2016党员入党决心书
2015/09/22 职场文书
详解Python requests模块
2021/06/21 Python
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
Python torch.flatten()函数案例详解
2021/08/30 Python