详解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 原型继承
Dec 26 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
js倒计时小程序
Nov 05 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
如何使用Jquery动态生成二级选项列表
Feb 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
PHP脚本的10个技巧(6)
2006/10/09 PHP
PHP 图片文件上传实现代码
2010/12/29 PHP
php创建多级目录的方法
2015/03/24 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
django Serializer序列化使用方法详解
2018/10/16 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python将字母转化为数字实例方法
2019/10/04 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
用python制作个音乐下载器
2021/01/30 Python
Python页面加载的等待方式总结
2021/02/28 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
盛大二次面试题
2016/11/18 面试题
医生实习工作总结的自我评价
2013/09/27 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
大学军训感言600字
2014/02/25 职场文书
2014年居委会工作总结
2014/12/09 职场文书
2015年班组长工作总结
2015/04/10 职场文书