JS替换字符串中所有指定字符串的方法，replace()函数

鄙人开发web应用有一个原则，就是能够用前端进行数据处理的就尽量交给前端（比如JavaScript）来完成，这样可以尽可能地减少客户端和服务器端之间的数据传输和服务器处理数据的内存消耗（当然，如果数据简单的话，也消耗不了多少内存，但是架不住并发量大的话，积少成多），同时也可以减轻带宽的压力。

JS中的replace()函数用来替换字符串中的指定字符串的方法，便是前端处理数据中常用的一个函数，比如去除表单输入中字符串的空格。

JS替换字符串replace()函数详解

replace(arg1, arg2)

函数一般情况下接收两个参数，第一个位置参数arg1可以是字符串，也可以是正则表达式，第二个参数arg2一般为所要替换的子串，一般也是字符串类型。

replace()函数返回值

replace()函数返回子串被替换后的新的字符串，并未修改原字符串。但是，一般情况下，如果不使用正则表达式，replace()所能替换的一般是原字符串第一个找到的子串，而不是替换所有的符合条件arg1的子串。

replace()函数替换字符串实例代码，及在线编辑器

<p id='e1'>笨鸟工具，x1y1z1.com！</p>
<p id='e2'></p>
<button class='btn btn-default' onclick="dosomething()">点击修改替换字符串</button>
<script>
  var a = document.getElementById("e1").innerHTML;
  function dosomething(){
    b = a.replace("x1y1z1.com","www.x1y1z1.com")
    b = b.replace("w","W")
    document.getElementById("e1").innerHTML = b
    document.getElementById("e2").innerHTML = a //查看原字符串是否被改变
  }
</script>

代码解析

通过试一试的运行结果，可以发现，当字符串中出现多个符合replace(arg1, arg2)中arg1的子串的时候，replace()函数只能替换掉第一个，除此之外，replace返回一个新的字符串，并为将原字符串进行修改。那么该如何对原字符串中所有满足条件的子串进行替换呢？可以使用正则表达式。

replace()函数修改所有指定字符串的方法

使用正则表达式时，可以在正则表达式后面加个小写的字母“g”对原字符串中所有满足条件的子串进行替换，实例代码如下：

<p id='e3'>笨鸟工具，www.x1y1z1.com！</p>

<button class='btn btn-default' onclick="dosomething1()">点击修改字符串</button>
<script>
  var a = document.getElementById("e3").innerHTML;
  function dosomething1(){
    
    b = a.replace(/w/g,"W")
    document.getElementById("e3").innerHTML = b
  }
</script>

实例解析

如上代码，/w/g为正则表达式，不加“g”的话，效果与不使用正则表达式的一样，可以通过试一试在线编辑器进行修改尝试一下。

replace()函数不区分大小写的方法

replace()函数是区分大小写的，如果不区分的话，可以在正则表达式后面加个小写的“i”，实例代码如下：

<p id='e5'>笨鸟工具，Www.x1y1z1.com！</p>

<button class='btn btn-default' onclick="dosomething1()">点击修改字符串</button>
<script>
  var a = document.getElementById("e5").innerHTML;
  function dosomething1(){
    
    b = a.replace(/w/gi,"")
    b = b.replace('.','')
    document.getElementById("e5").innerHTML = b
  }
</script>

代码解析

如上代码，正则表达是后面的g和i，表示“全部”和“不区分大小写”，因此可以将Www.x1y1z1.com中的w全部替换。如果只是单独地使用i，则只能替换最先匹配到的子串。

hot：热门