JavaScript中String.prototype.replace() 方法的使用
摘抄于:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace
replace()
方法使用一个替换值(replacement
)替换掉一个匹配模式(pattern
)在原字符串中某些或所有的匹配项,并返回替换后的新的字符串。这个替换模式可以是一个字符串或者一个 RegExp
,替换值可以是一个字符串或者一个函数。
语法
str.replace(regexp|substr, newSubStr|function)
参数
regexp
(pattern)- 一个
RegExp
对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
substr
(pattern)- 一个要被
newSubStr
替换的
字符串
。其被视为一整个字符串,而不是一个正则表达式。仅仅是第一个匹配会被替换。
function
(replacement)- 一个用来创建新子字符串的函数,该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。
返回值
一个部分或全部匹配由替代模式所取代的新的字符串。
描述
该方法并不改变调用它的字符串本身,而只是返回一个新的替换后的字符串。
在进行全局的搜索替换时,正则表达式需包含 g
标志。
使用字符串作为参数
替换字符串可以插入下面的特殊变量名:
变量名 | 代表的值 |
$$ |
插入一个 "$"。 |
$& |
插入匹配的子串。 |
$` |
插入当前匹配的子串左边的内容。 |
$' |
插入当前匹配的子串右边的内容。 |
$n |
假如第一个参数是 |
指定一个函数作为参数
你可以指定一个函数作为第二个参数。在这种情况下,当匹配执行后, 该函数就会执行。 函数的返回值作为替换字符串。 (注意: 上面提到的特殊替换参数在这里不能被使用。) 另外要注意的是, 如果第一个参数是正则表达式, 并且其为全局匹配模式, 那么这个方法将被多次调用, 每次匹配都会被调用。
下面是该函数的参数:
变量名 | 代表的值 |
match | 匹配的子串。(对应于上述的$&。) |
p1,p2, ... |
假如replace()方法的第一个参数是一个 |
offset |
匹配到的子字符串在原字符串中的偏移量。(比如,如果原字符串是“abcd”,匹配到的子字符串时“bc”,那么这个参数将是1) |
string | 被匹配的原字符串。 |
(精确的参数个数依赖于replace()的第一个参数是否是一个正则表达式对象, 以及这个正则表达式中指定了多少个括号子串。)
下面的例子将会使 newString
变成'abc - 12345 - #$*%':
function replacer(match, p1, p2, p3, offset, string) {
// p1 is nondigits, p2 digits, and p3 non-alphanumerics
return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
示例
在 replace() 中使用正则表达式
在下面的例子中,replace()
中使用了正则表达式及忽略大小写标示。
var str = 'Twas the night before Xmas...';
var newstr = str.replace(/xmas/i, 'Christmas');
console.log(newstr); // Twas the night before Christmas...
在 replace()
中使用 global
和 ignore
选项
下面的例子中,正则表达式包含有全局替换(g)和忽略大小写(i)的选项,这使得replace方法用'oranges'替换掉了所有出现的"apples".
var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges"); // oranges are round, and oranges are juicy.
console.log(newstr);
交换字符串中的两个单词
下面的例子演示了如何交换一个字符串中两个单词的位置,这个脚本使用$1 和 $2 代替替换文本。
var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
// Smith, John
console.log(newstr);
使用行内函数来修改匹配到的字符。
在这个例子中,所有出现的大写字母转换为小写,并且在匹配位置前加一个连字符。重要的是,在返回一个替换了的字符串前需要在匹配元素前需要进行添加操作。
在返回前,替换函数允许匹配片段作为参数,并且将它和连字符进行连接作为新的片段。
function styleHyphenFormat(propertyName) {
function upperToHyphenLower(match) {
return '-' + match.toLowerCase();
}
return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
此代码 styleHyphenFormat('borderTop') 将返回 'border-top'。
因为我们想在最终的替换中进一步转变匹配结果,所以我们必须使用一个函数。这迫使我们在使用toLowerCase()
方法前进行评估。如果我们尝试不用一个函数进行匹配,那么使用toLowerCase()
方法将不会有效。
var newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase()); // won't work
这是因为 '$&'.toLowerCase() 会先被解析成字符串字面量(这会导致相同的'$&')而不是当作一个模式。
将华氏温度转换为对等的摄氏温度
下面的例子演示如何将华氏温度转换为对等的摄氏温度。华氏温度用一个数字加一个"F"来表示,这个函数将返回一个数字加"C"来表示的摄氏温度。例如,如果输入是212F,这个函数将返回100C。如果输入数字时0F,这个方法将返回"-17.77777777777778C"。
正则表达式test检查任何数字是否以 F 结尾。华氏温度通过第二个参数p1进入函数。这个函数基于华氏温度作为字符串传递给f2c函数设置成摄氏温度。然后f2c()返回摄氏温度。这个函数与Perl的 s///e 标志相似。
function f2c(x)
{
function convert(str, p1, offset, s)
{
return ((p1-) * /) + "C";
}
var s = String(x);
var test = /(\d+(?:\.\d*)?)F\b/g;
return s.replace(test, convert);
}
使用行内函数和正则来避免循环
下例把某种模式的字符串转换为一个对象数组(其元素为对象)。
输入:
一个由 x,- 和 _ 组成的字符串。 x-x_ ---x---x---x--- -xxx-xx-x- _x_x___x___x___
输出:
一个数组对象。'x' 产生一个 'on' 状态,'-'(连接符)产生一个 'off' 状态,而 '_' (下划线)表示 'on' 状态的长度。
[
{ on: true, length: },
{ on: false, length: },
{ on: true, length: }
...
] 代码片段:
var str = 'x-x_';
var retArr = [];
str.replace(/(x_*)|(-)/g, function(match, p1, p2){
if(p1) retArr.push({ on: true, length: p1.length });
if(p2) retArr.push({ on: false, length: });
}); console.log(retArr);
规范
描述 | 状态 | 说明 |
---|---|---|
ECMAScript 3rd Edition (ECMA-262) | Standard | 最早在JavaScript 1.2 中定义并实现。 |
ECMAScript 5.1 (ECMA-262) String.prototype.replace |
Standard | |
ECMAScript 2015 (6th Edition, ECMA-262) String.prototype.replace |
Standard | |
ECMAScript 2017 Draft (ECMA-262) String.prototype.replace |
Draft |
浏览器兼容性
Firefox中需要注意的特性
- 从Gecko 27 (Firefox 27 / Thunderbird 27 / SeaMonkey 2.24) 开始,这个方法就被整合到了ECMAScript规范中。当 replace() 使用全局g标志的正则表达式被调用,
RegExp.lastIndex
属性将被重置为0(bug 501739)。 - 从 Gecko 39 (Firefox 39 / Thunderbird 39 / SeaMonkey 2.36)开始,
flags
参数就被弃用并抛出一个控制台警告(bug 1142351)。 - 从 Gecko 47 (Firefox 47 / Thunderbird 47 / SeaMonkey 2.44) 开始,在非发行版本中已不再支持非标准的
flags
参数,并且不久后会完全移除该参数(bug 1245801)。 - 从 Gecko 49 (Firefox 49 / Thunderbird 49 / SeaMonkey 2.46) 开始,不再支持非标准的
flags
参数(bug 1108382)。
JavaScript中String.prototype.replace() 方法的使用的更多相关文章
- JavaScript中Object.prototype.toString方法的原理
在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. ? 1 2 var arr = []; console.lo ...
- JavaScript中String对象的方法介绍
1.字符方法 1.1 charAt() 方法,返回字符串中指定位置的字符. var question = "Do you like JavaScript?"; alert(ques ...
- javascript中String的fromCharCode()方法
前几天遇到一个bug,后端的模板引擎在输出形如: <div title="111 aaa">内容</div> 这样的内容时,无法输出' '空格,所以只能用' ...
- JavaScript中String的math方法与RegExp的exec方法的区别
1.exec是正则表达式的方法,方法参数为字符串.match为字符串的方法,参数为正则表达式对象. 2.match与exec都返回数组.如果调用exec方法的正则表达式没有分组内容,则返回第一个匹配的 ...
- JavaScript中String对象的match()、replace() 配合正则表达式使用
正则表达式由来已久,查找替换功能非常强大,但模板难记复杂. JavaScript中String对象的match().replace()这2个方法都要使用正则表达式的模板.当模板内容与字符串不相匹配时, ...
- 谈谈javascript中的prototype与继承
谈谈javascript中的prototype与继承 今天想谈谈javascript中的prototype. 通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性 ...
- Javascript中alert</script>的方法
Javascript中alert</script>的方法: <%@ page language="java" import="java.util.*&q ...
- JavaScript中的prototype和__proto__细致解析
最近在学js,体会了一点点它的灵活性.对于初学者的我,总是被它的灵活感到晕头转向,最近发现了一点东西想与大家分享. JavaScript中的prototype和_proto_: 我们先了解一点js中的 ...
- URL地址中中文乱码详解(javascript中encodeURI和decodeURI方法、java.net.URLDecoder.encode、java.net.URLDecoder.decode)
引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生了,该如何解决呢?且听本文详细道来. ...
随机推荐
- 区域、模板页与WebAPI初步
区域.模板页与WebAPI初步 一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域( ...
- 微信SDK使用总结
最近做一个分享功能,需要使用微信SDK分享内容给朋友或朋友圈.期间遇到些奇怪的问题,花了点时间去折腾了一番. 首先需要到微信开放平台http://open.weixin.qq.com/?lang=zh ...
- DropDownList和GridView用法
DropDownList和GridView用法 DropDownList控件和GridView控件在Asp.net中相当常用,以下是控件的解释,有些是常用的,有些是偶尔的,查找.使用.记录,仅此而 ...
- AngularJS 3
AngularJS 源码分析3 本文接着上一篇讲 上一篇地址 回顾 上次说到了rootScope里的$watch方法中的解析监控表达式,即而引出了对parse的分析,今天我们接着这里继续挖代码. $w ...
- T4模版
T4模版 这讲适合所有的MVC程序 很荣幸,我们的系统有了体验的地址了.演示地址 之前我们发布了一个简单的代码生成器,其原理就是读取数据库的表结构,生成文本的一个方式来生成代码! 为了替代重复的劳动, ...
- poj3519 Lucky Coins Sequence矩阵快速幂
Lucky Coins Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- 【学习笔记】锋利的jQuery(一)选择器
一.要点阐述 1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右.. 2,jQuery里的方法都被设计程自动操作对象集合,而 ...
- 开始MVC5之旅
ASP.NET MVC 5-开始MVC5之旅 本教程将使用Visual Studio 2013手把手教你构建一个入门的ASP.NET MVC5 Web应用程序.本教程配套的C#源码工程可通过如下网 ...
- Object-c学习之路三(@class与#import的区别)
//@class只是为了声明B是一个类 当两个类相互包含的时候#import是做不到的 //一般在.h文件中用@class声明一个类成员 在..m文件中具体用到时才用#import应用 //二者区别 ...
- 使用brew安装软件
使用brew安装软件 brew 又叫Homebrew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件, 只需要一个命令, 非常方便 brew类似ubuntu系统下的apt- ...