js--string/正则表达式replace方法详解

lifefriend_007 发布于2019-08-20 15:18 / 2415人阅读

摘要：方法是涉及到正则表达式中较为复杂的一个方法，严格上说应该是对象的方法。字符串中要替换的子串或正则第二个参数必需，一个字符串值，规定了替换文本或生成替换文本的函数。如果具有全局标志，那么方法将替换所有匹配的子串。

replace方法是javascript涉及到正则表达式中较为复杂的一个方法，严格上说应该是string对象的方法。只不过牵扯到正则的时候比较多一些。需要我们灵活的使用。

语法： stringObj.replace(regexp/substr,replacement)；

第一个参数：必需。字符串中要替换的子串或正则RexExp；
第二个参数：必需，一个字符串值，规定了替换文本或生成替换文本的函数。
返回值：注意它的返回值是一个新的字符串，并没有更改原有字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
所以根据它的参数的不同分为很多种情况，以下一一对各种情况加以分析：

NO.1 两个参数都是字符串

var str1 = "这是一段原始文本，需要替换的内容"这要替换"！";
var newStr = str1.replace("这要替换","need replace");
console.log( newStr );    //输出：   这是一段原始文本，需要替换的内容"need replace"！

上面的例子中第二个参数字符串’need replace’,替换掉了第一个参数字符串’这要替换’。这是最简单的一种形式。

NO.2 第一个参数是正则，第二个参数是字符串

var str2 = "这是一段原始文本，需要替换的内容"ac这要替换bb"！";
var newStr = str2.replace( /([a-z])+/g,"qqq" );
console.log( newStr );    //输出：   这是一段原始文本，需要替换的内容"qqq这要替换qqq"！

上面的例子字符串’qqq’,替换了正则匹配的内容。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

NO.3 第一个参数是正则，第二个参数是带$符的字符串

var str3 = "这是一段原始文本,"3c这要替换4d"!";
var newStr = str3.replace( /([0-9])([a-z])/g,"$1" );
console.log( newStr );    //输出：    这是一段原始文本,"3这要替换4"!";

上面的例子，$1表示regexp中的第一个子表示即（[0-9]）匹配单个数字，同理若是$2则表示第二个子表示即（[a-z]）；所以，’3c’这个匹配到的整体被第一个子表示说表示的’3’替换，’4d’被第一个子表示匹配的数字’4’所替换。其他几个同理可得：

（/([0-9])([a-z])/g,”$2″）—>////输出：这是一段原始文本,”c这要替换d”!"; (3c和4d被相应的第二个子表示匹配出来的c和d替换)
（/([0-9])([a-z])/g,”$"”）—>////输出：这是一段原始文本,”这要替换d”!这要替换”!”!"; (3c被3c右侧文本替换，4d右侧是”!替换，所以出现俩次)

NO.4 第一个参数是正则，第二个参数函数

var str4 = "这是一段原始文本，需要替换的内容"aa这要bbb替换ccccc"！";
var newStr = str4.replace( /[a-z]+/g,function ($0){
    var str = "";
    for (var i = 0; i < $0.length; i++) {
        str += "*";
    };
    return str;
} );
console.log( newStr );    //这是一段原始文本，需要替换的内容"**这要***替换*****"！

上面的例子函数的第一个参数为匹配的regexp的整体，根据长度函数返回值为相应替换的文本；

NO.5 第一个参数是正则且有子表达式，第二个参数函数且带有多个参数

var str5 = "这是一段原始文本，需要替换的内容"3c这要替换4d"！";
var newStr = str5.replace( /([0-9])([a-z])/g,function (arg1,arg2,arg3,arg4,arg5){
 console.log( arg1 );
  console.log( arg2 );
  console.log( arg3 );
  console.log( arg4 );
  console.log( arg5 );
} );
//输出：
3c
3
c
17
这是一段原始文本，需要替换的内容"3c这要替换4d"！
4d
4
d
23
这是一段原始文本，需要替换的内容"3c这要替换4d"！

上面的例子第一个参数arg1表示匹配的整体，arg2表示第一个子表达式，arg3表示第二个子表达式，接下来的参数arg4是一个整数，声明了表示子匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

以上就是replace方法各种可能的情况。确实是一个需要深入理解的方法，不过确实也很强大的一个方法，值得深入研究！

私有云 GPU服务器 replace方法正则正则表达式 js中的replace方法正则匹配正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82145.html

正则的贪婪，前瞻及属性详解

摘要：正则的三种方法编译正则表达式。返回找到的值，并确定其位置。规定匹配的类型。用于全局匹配，用于区分大小写，用于全局区分大小写的匹配。非贪婪匹配就是匹配到结果就好，就少的匹配字符。对象是否具有标志。正则表达式的源文本。对正则的深入学习学习正则我们不能光看看几个修饰符就可以了，因为正则还有许多深入的知识，下面我就来为大家扒一扒。。。showImg(https://segmentfault...

pepperwang 2019-08-20 18:57 评论0 收藏0
Javascript字符串常用方法详解

摘要：属性里的字符串类似于数组，都是一个一个字符拼凑在一起组成的，因此可以用属性取得字符串的长度字符串常用的一些方法返回字符串的第个字符，如果不在之间，则返回一个空字符串。如果匹配成功，则返回正则表达式在字符串中首次匹配项的索引否则，返回。字符串字符串就是一个或多个排列在一起的字符，放在单引号或双引号之中。 abc abc length属性js里的字符串类似于数组，都是一个一个字...

Wildcard 2019-08-21 14:08 评论0 收藏0
正则表达式详解及实战

摘要：如果你还没正式开始正则表达式，请快速浏览跳过本章节。就是一个等同于但更简略的正则表达式。如果想查找全部，就要加标识全局匹配规则正则表达式搜索字符串指定的值，从而去匹配字符串。正则表达式都是用来操作字符串的。正则表达式 Create by jsliang on 2018-11-14 10:41:20 Recently revised in 2018-11-19 08:46:37 ...

simon_chen 2019-08-26 13:22 评论0 收藏0
正则表达式详解 js

摘要：程序员的正则表达式，医生的处方和道士的鬼画符，都是利器。其实，正则表达式是一门语言，有自己独特的语法，还拥有自己的解释器。但是，如果正则表达式是动态的，是根据变量来定义的，那么，只能使用第二种构造函数的方式。前言作为一个程序员，要出去装逼，手中必备的技能就是正则表达式。程序员的正则表达式，医生的处方和道士的鬼画符，都是利器。在js中，很多的场景需要去使用到它（毕竟，js刚刚诞生的...

fredshare 2019-08-22 11:06 评论0 收藏0
正则基础详解

摘要：正则基础详解开头，结尾匹配次或多次匹配次匹配次或次当跟在后面时，匹配模式是非贪婪的匹配确定是次，非负数匹配除了换行符以外的任何字符包括点本身小括号中的内容只匹配不捕获正向预查负向预查匹配或者匹配中任何一个匹配未包含的任意字符匹配指定范围正则基础详解 /^开头，结尾$/ * 匹配0次或多次 + 匹配1-n次？匹配0次或1次；当?跟在 * + {n} {n,m} {n,} 后面时...

YanceyOfficial 2019-08-26 11:37 评论0 收藏0