码云前端开发 2021-05-05

JavaScript RegExp replace() 方法

文章目录隐藏

定义和用法
语法
参数值
返回值
浏览器支持
实例 1
实例 2
实例 3

定义和用法

replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

如果想了解更多正则表达式教程请查看本站的：RegExp 教程和 our RegExp 对象参考手册.

该方法不会改变原始字符串。

语法

string.replace(searchvalue,newvalue)

参数值

参数	描述
searchvalue	必须。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。
newvalue	必需。一个字符串值。规定了替换文本或生成替换文本的函数。

返回值

类型	描述
String	一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

浏览器支持

所有主要浏览器都支持 replace() 方法。

实例 1

在本例中，我们将执行一次替换，当第一个 “Microsoft” 被找到，它就被替换为 “Mybj”：

<p>单击按钮将段落中的第一个 Microsoft 替换成 Mybj：</p>
<p id="demo">Visit Microsoft!Visit Microsoft!</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    var str=document.getElementById("demo").innerHTML; 
    var n=str.replace("Microsoft","Mybj");
    document.getElementById("demo").innerHTML=n;
}
</script>

程序运行结果：

单击按钮将段落中的第一个 Microsoft 替换成 Mybj：

Visit Mybj!Visit Mybj!

实例 2

执行一个全局替换, 忽略大小写:

<p>单击按钮将段落中的“blue”替换成“red”。</p>
<p id="demo">Mr Blue has a blue house and a blue car.</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    var str=document.getElementById("demo").innerHTML; 
    var n=str.replace(/blue/gi,"red");
    document.getElementById("demo").innerHTML=n;
}
</script>

程序运行结果：

Mr red has a red house and a red car.

实例 3

在本例中，我们通过 prototype 为 JavaScript 的 String 对象添加方法，来实现将所有 “Microsoft” 替换为 “Mybj”：

<p>单击按钮将段落中所有“Microsoft”替换成“Mybj”：</p>
<p id="demo">Visit Microsoft!Visit Microsoft!Visit Microsoft!</p>
<button onclick="myFunction()">点我</button>
<script>
String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};
function myFunction() {
    var str=document.getElementById("demo").innerHTML;
    var n=str.replaceAll("Microsoft","Mybj");
    document.getElementById("demo").innerHTML=n;
}
</script>

程序运行结果：