javascript中replace()函数用法小谈

2016-02-19 16:55 4 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的javascript中replace()函数用法小谈,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

  先看一下MSDN中的介绍

  replace 方法

  返回根据正则表达式进行文字替换后的字符串的复制。

  stringObj.replace(rgExp, replaceText)

  参数

  stringObj

  必选项。要执行该替换的 String 对象或字符串文字。该字符串不会被 replace 方法修改。

  rgExp

  必选项。为包含正则表达式模式或可用标志的正则表达式对象。也可以是 String 对象或文字。如果 rgExp 不是正则表达式对象,它将被转换

  为字符串,并进行精确的查找;不要尝试将字符串转化为正则表达式。

  replaceText

  必选项。是一个String 对象或字符串文字,对于stringObj 中每个匹配 rgExp 中的位置都用该对象所包含的文字加以替换。在 Jscript 5.5

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  或更新版本中,replaceText 参数也可以是返回替换文本的函数。如果 replaceText 是一个函数,对于每个匹配的子字符串,调用该函数时带

  有下面的 m + 3 个参数,这里 m 是在 rgExp 中用于捕获的左括弧的个数。第一个参数是匹配的子字符串。接下来的 m 个参数是搜索中捕获

  到的全部结果。参数 m + 2 是当前字符串对象中发生匹配位置的偏移量,而参数 m + 3 是当前字符串对象。结果为将每一匹配的子字符串替

  换为函数调用的相应返回值后的字符串值。

  其实光这么看,一定迷糊,让我们举几个例子,解开replace的神秘面纱

  exp1:

  这个是最常见的,也是最简单的了。我直接就盗用MSDN的例子了

function ReplaceDemo()...{  var r, re;          //Declare variables.  var ss = "The man hit the ball with the bat.";  re = /The/g;        //Create regular expression pattern.  r = ss.replace(re, "A");  //Replace "The" with "A".  return(r);         //Return string with replacement made.}

  这个函数返回的就是"A man hit the ball with the bat."这个字符串.其实这里用正则有点大财小用,我们可以直接把

  re = /The/g;        //Create regular expression pattern.

  r = ss.replace(re, "A");  //Replace "The" with "A".

  换成r = ss.replace("The", "A");最终结果是一样的,这个比较简单,没有可说的,要注意的是ss.replace("The", "A")以后ss是没有变化的

  ,还是"The man hit the ball with the bat.",只不过是这个方法返回了新的字符串。

  exp2:

function ReplaceDemo()...{  var r, re;           //Declare variables.  var ss = "The rain in Spain falls mainly in the plain.";  re = /(S+)(s+)(S+)/g;    //Create regular expression pattern.  r = ss.replace(re, "$3$2$1");  //Swap each pair of words.  return(r);           //Return resulting string.}

  这个比较典型。刚开始看这个"$3$2$1"不懂是啥意思,MSDN这样解释

  $$ $(JScript 5.5 或更高版本)

  $& 指定当前字符串对象中与整个模式相匹配的部分。(JScript 5.5 或更高版本)

  $` 指定当前字符串对象中位于 $& 所描述的匹配前面的部分。(JScript 5.5 或更高版本)

  $' 指定当前字符串对象中位于 $& 所描述的匹配后面的部分。(JScript 5.5 或更高版本)

  $n 第 n 个捕获到的子匹配,这里 n 为从 1 到 9 的十进制一位数。(JScript 5.5 或更高版本)

  $nn 第 nn 个捕获到的子匹配,这里 nn 为从 01 到 99 的十进制二位数。(JScript 5.5 或更高版本)

  这样看就有思路了。现在这个re = /(S+)(s+)(S+)/g;有3个括号,也就是相当于3个匹配。而这个$1、$2、$3就分别代表这3个匹配。

  回到这个例子当中。re = /(S+)(s+)(S+)/g就来匹配一个非空串+一个空串+一个非空串,也就是会非别匹配"The rain"、"in Spain"、

  "falls mainly"、"in the"。这些都会被匹配。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  实际上是这个函数一共找到了4个符合条件的字符串。第一个是"The rain",这个字符串的3部分"The"、" "(空格)、"rain"分别对应$1$2$3这3个子匹配。 现在再看这句话就简单了r = ss.replace(re, "$3$2$1"),它的意思就是把找到的每个串的这3个子匹配的顺序调整。第一个就是"rain The"。同理,后面的几个字符串都这样颠倒一下。最终结果就是"rain The Spain in mainly falls the in plain."。不难理解吧。

  当然喽,你不一定对这3个正则都要处理的。比如我现在想把这个字符串中的所有空格后面加"_",要怎么写呢?这样来写,

  re = /(s+)/g;

  r = ss.replace(re, "$1_");

  这样就可以了,但是发觉这种用法还不如第一种用的多。不要紧,我们主要是用来给第三种用法作铺垫。现在我想把空格去掉,怎么做?

  exp3:

function ReplaceDemo()...{  var r, re;           //Declare variables.  var ss = "The rain in Spain falls mainly in the plain.";  re = /(s+)/g;    //Create regular expression pattern.  r = ss.replace(re, function()...{return "";});  //Swap each pair of words.  return(r);           //Return resulting string.}

  先来深刻理解这句话:如果 replaceText 是一个函数,对于每个匹配的子字符串,调用该函数时带有下面的 m + 3 个参数,这里 m 是在 rgExp 中用于捕获的左括弧的个数。第一个参数是匹配的子字符串。接下来的 m 个参数是搜索中捕获到的全部结果。参数 m + 2 是当前字符串对象中发生匹配位置的偏移量,而参数 m + 3 是当前字符串对象。结果为将每一匹配的子字符串替换为函数调用的相应返回值后的字符串值。

  用上面的例子来解释这句话吧。对于这个函数function(){return "";}实际上有4参数的,也就是上面所说的m+3个。这里m=1,是正则表达式中左括号的个数,也就是一个。而这4个参数分别是匹配到的子字符串、(s+)匹配到的字符串、匹配的位置、整个字符串(就是"The rain in Spain falls mainly in the plain.")这次一共匹配了8个,因为有8个空格嘛。我这里没有写参数,因为我直接就返回了""。也就是说我一找到一个(s+)我就把它换成""。实际上这个函数里面你可以写很多自己想得到的结果了。

  接着盗用MSDN的例子

function f2c(s) ...{ var test = /(d+(.d*)?)F/g;  //Initialize pattern. return(s.replace  (test,   function($0,$1,$2) ...{    return((($1-32) * 5/9) + "C");   }  ) );}document.write(f2c("Water freezes at 32F and boils at 212F."));document.write(f2c("Water freezes at 32F and boils at 212F."));

  现在看这个就简单了吧。 var test = /(d+(.d*)?)F/g; 正则里面有俩左括号吧。所以现在这个function($0,$1,$2)实际上有2+3个参数,那为何只写3个呢?鬼才知道,其实连3个都不用,写俩就好了function($0,$1)。因为本例中我们只用到$1。有人可能还会问,既然我们只用到$1,为何还要写$0呢。其实$0,$1只不过是参数,实际我们想用的是第二个参数。可能你又忘记第二个参数代表什么了,再看一遍:如果 replaceText 是一个函数,对于每个匹配的子字符串,调用该函数时带有下面的 m + 3 个参数,这里 m 是在 rgExp 中用于捕获的左括弧的个数。第一个参数是匹配的子字符串。接下来的 m 个参数是搜索中捕获到的全部结果。参数 m + 2 是当前字符串对象中发生匹配位置的偏移量,而参数 m + 3 是当前字符串对象。结果为将每一匹配的子字符串替换为函数调用的相应返回值后的字符串值。$0是整个子字符串,$1是第一个括号内匹配到的字符串。本例中一共匹配了两次,第一次中$0为"32F",$1为"32"。第二次中$0为"212F",$1为"212"。

  似乎replace基本就是这么用了,很多高级用法无非是经过这三种形式结合的。慢慢理解一下,还是比较简单的。

来源:https://www.tulaoshi.com/n/20160219/1613560.html

延伸阅读
标签: Web开发
JavaScript中splice函数方法是从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。 arrayObj.splice( start, deleteCount, [item1[, item2[, . . . [,itemN]]]]) 其中arrayObj必选项。一个 Array 对象。 start是必选项。指定从数组中移除元素的开始位置,这个位置是从 0 开...
标签: 电脑入门
一、IsEmpty语法 返回 Boolean 值,指出变量是否已经初始化。 语法 IsEmpty(expression) 必要的 expression 参数是一个 Variant,包含一个数值或字符串表达式。但是,因为 IsEmpty 被用来确定个别变量是否已初始化,所以 expression 参数通常是单一变量名。 说明 如果变量未初始化或已明确设置为 Empty,则 IsEmpty 返回 True;否则返回 F...
标签: 电脑入门
一、IPmt语法 返回一个 Double,指定在一段时间内对定期定额支付且利率固定的年金所支付的利息值。 语法 IPmt(rate, per, nper, pv[, fv[, type]]) IPmt 函数有下列命名参数: 参数说明 rate 必要。Double 指定每一期的利率。例如,如果有一笔贷款年百分率 (APR) 为百分之十且按月付款的汽车贷款,则每一期的利率为 0.1/12,或 0.0083。 ...
标签: Web开发
1.最开始web上只有静态的html 2.为了满足更好的交互需求,netscape开发了在Navigator中使用的LiveScript语言,后改名为JavaScript 3.Microsoft发行jscript用于internet explorer. 4.最初的jscript和javascript差异过大,web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,是一种国际标准化的javascr...
标签: 电脑入门
今天接着给大家来关于Excel中sumif函数用法的操作技巧,那么就有人问了,学会了Excel中sumif函数用法有什么作用呢,不要急,下面就请听图老师小编一一给大家进行详细的讲解: 一、SUMIF函数介绍 SUMIF函数根据指定条件对若干单元格求和,该条件可以是数值、文本或表达式,可以应用在人事、工资和成绩统计中。 二、SUMIF函数用法 sumif函数...

经验教程

592

收藏

90
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部