详解JavaScript 中的 replace 方法


Posted in Javascript onJanuary 01, 2016

定义和用法

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

stringObject.replace(regexp/substr,replacement)

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

一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

正则字符

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

字符 替换文本
$$ 直接量符号(就是当做'$$'字符用)
$& 与正则相匹配的字符串
$` 匹配字符串左边的字符
$' 匹配字符串右边的字符
$1,$2,$,3,…,$n 匹配结果中对应的分组匹配结果

下面通过实例给大家介绍:

例子 1

在本例中,我们将使用 "W3School" 替换字符串中的 "Microsoft":

<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
</script>

输出:

Visit W3School!

例子 2

在本例中,我们将执行一次全局替换,每当 "Microsoft" 被找到,它就被替换为 "W3School":

<script type="text/javascript">
var str="Welcome to Microsoft! "
str=str + "We are proud to announce that Microsoft has "
str=str + "one of the largest Web Developers sites in the world."
document.write(str.replace(/Microsoft/g, "W3School"))
</script>

输出:

Welcome to W3School! We are proud to announce that W3School
has one of the largest Web Developers sites in the world.

例子 3

您可以使用本例提供的代码来确保匹配字符串大写字符的正确:

text = "javascript Tutorial";
text.replace(/javascript/i, "JavaScript");

例子 4

在本例中,我们将把 "Doe, John" 转换为 "John Doe" 的形式:

name = "Doe, John";
name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");

例子 5

在本例中,我们将把所有的花引号替换为直引号:

name = '"a", "b"';
name.replace(/"([^"]*)"/g, "'$1'");

例子 6

在本例中,我们将把字符串中所有单词的首字母都转换为大写:

name = 'aaa bbb ccc';
uw=name.replace(/\b\w+\b/g, function(word){
 return word.substring(0,1).toUpperCase()+word.substring(1);}
 );

正则替换字符串

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

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

使用$&字符给匹配字符加大括号

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>

以上内容是小编给大家介绍的avaScript 中的 replace 方法,希望大家喜欢。

Javascript 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
基于JavaScript实现定时跳转到指定页面
Jan 01 #Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 #Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 #Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 #Javascript
常见的javascript跨域通信方法
Dec 31 #Javascript
javascript实现input file上传图片预览效果
Dec 31 #Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
使用PHP维护文件系统
2006/10/09 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
php的ajax简单实例
2014/02/27 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
js图片自动切换效果处理代码
2013/05/07 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
WebPack基础知识详解
2017/01/16 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
感恩父母的演讲稿
2014/05/06 职场文书
县委务虚会发言材料
2014/10/20 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
Django框架中模型的用法
2022/06/10 Python
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS