在此页

• 句法
• 描述
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

replace() method returns a new string with some or all matches of a pattern replaced by a replacement . pattern can be a string or a RegExp ，和 replacement can be a string or a function to be called for each match. If pattern is a string, only the first occurrence will be replaced.

The original string is left unchanged.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

const newStr = str.replace(regexp|substr, newSubstr|function)
					

参数

regexp (pattern)

RegExp object or literal. The match or matches are replaced with newSubstr or the value returned by the specified function .

substr

String that is to be replaced by newSubstr . It is treated as a literal string and is not interpreted as a regular expression. Only the first occurrence will be replaced.

newSubstr (replacement)

String that replaces the substring specified by the specified regexp or substr parameter. A number of special replacement patterns are supported; see the " Specifying a string as a parameter " section below.

function (replacement)

A function to be invoked to create the new substring to be used to replace the matches to the given regexp or substr . The arguments supplied to this function are described in the " Specifying a function as a parameter " section below.

返回值

A new string, with some or all matches of a pattern replaced by a replacement.

描述

This method does not change the calling String object. It simply returns a new string.

To perform a global search and replace, include the g switch in the regular expression.

Specifying a string as a parameter

The replacement string can include the following special replacement patterns:

Pattern	插入
$$	Inserts a "$" .
$&	Inserts the matched substring.
$`	Inserts the portion of the string that precedes the matched substring.
$'	Inserts the portion of the string that follows the matched substring.
$ n	Where n is a positive integer less than 100, inserts the n th parenthesized submatch string, provided the first argument was a RegExp object. Note that this is 1 -indexed. If a group n is not present (e.g., if group is 3), it will be replaced as a literal (e.g., $3 ).
$<Name>	Where Name is a capturing group name. If the group is not in the regular expressions (or not in the match), this will resolve to the empty string. Only available in browser versions supporting named capturing groups.

Specifying a function as a parameter

You can specify a function as the second parameter. In this case, the function will be invoked after the match has been performed. The function's result (return value) will be used as the replacement string. ( 注意： The above-mentioned special replacement patterns do not apply in this case.)

Note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is global.

The arguments to the function are as follows:

Possible name	Supplied value
match	The matched substring. (Corresponds to $& above.)
p1, p2, ...	n th string found by a parenthesized capture group (including named capturing groups), provided the first argument to replace() was a RegExp object. (Corresponds to $1 , $2 , etc. above.) For example, if /(\a+)(\b+)/ , was given, p1 is the match for \a+ ，和 p2 for \b+ .
offset	The offset of the matched substring within the whole string being examined. (For example, if the whole string was 'abcd' , and the matched substring was 'bc' , then this argument will be 1 .)
string	The whole string being examined.
groups	In browser versions supporting named capturing groups, will be an object whose keys are the used group names, and whose values are the matched portions ( undefined if not matched).

(The exact number of arguments depends on whether the first argument is a RegExp object—and, if so, how many parenthesized submatches it specifies.)

The following example will set newString to 'abc - 12345 - #$*%' :

function replacer(match, p1, p2, p3, offset, string) {
  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(' - ');
}
let newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  // abc - 12345 - #$*%
					

范例

Defining the regular expression in replace()

In the following example, the regular expression is defined in replace() and includes the ignore case flag.

let str = 'Twas the night before Xmas...';
let newstr = str.replace(/xmas/i, 'Christmas');
console.log(newstr);  // Twas the night before Christmas...
					

This logs 'Twas the night before Christmas...' .

注意： 见 this guide for more explanations about regular expressions.

Using global and ignore with replace()

Global replace can only be done with a regular expression. In the following example, the regular expression includes the global and ignore case flags which permits replace() to replace each occurrence of 'apples' in the string with 'oranges' .

let re = /apples/gi;
let str = 'Apples are round, and apples are juicy.';
let newstr = str.replace(re, 'oranges');
console.log(newstr);  // oranges are round, and oranges are juicy.
					

This logs 'oranges are round, and oranges are juicy' .

Switching words in a string

The following script switches the words in the string. For the replacement text, the script uses capturing groups 和 $1 and $2 replacement patterns.

let re = /(\w+)\s(\w+)/;
let str = 'John Smith';
let newstr = str.replace(re, '$2, $1');
console.log(newstr);  // Smith, John
					

This logs 'Smith, John' .

Using an inline function that modifies the matched characters

In this example, all occurrences of capital letters in the string are converted to lower case, and a hyphen is inserted just before the match location. The important thing here is that additional operations are needed on the matched item before it is given back as a replacement.

The replacement function accepts the matched snippet as its parameter, and uses it to transform the case and concatenate the hyphen before returning.

function styleHyphenFormat(propertyName) {
  function upperToHyphenLower(match, offset, string) {
    return (offset > 0 ? '-' : '') + match.toLowerCase();
  }
  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
					

Given styleHyphenFormat('borderTop') , this returns 'border-top' .

Because we want to further transform the result of the match before the final substitution is made, we must use a function. This forces the evaluation of the match prior to the toLowerCase() method. If we had tried to do this using the match without a function, the toLowerCase() would have no effect.

let newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase());  // won't work
					

This is because '$&'.toLowerCase() would first be evaluated as a string literal (resulting in the same '$&' ) before using the characters as a pattern.

Replacing a Fahrenheit degree with its Celsius equivalent

The following example replaces a Fahrenheit degree with its equivalent Celsius degree. The Fahrenheit degree should be a number ending with "F" . The function returns the Celsius number ending with "C" . For example, if the input number is "212F" , the function returns "100C" . If the number is "0F" , the function returns "-17.77777777777778C" .

The regular expression test checks for any number that ends with F . The number of Fahrenheit degree is accessible to the function through its second parameter, p1 . The function sets the Celsius number based on the Fahrenheit degree passed in a string to the f2c() 函数。 f2c() then returns the Celsius number. This function approximates Perl's s///e 标志。

function f2c(x) {
  function convert(str, p1, offset, s) {
    return ((p1 - 32) * 5/9) + 'C';
  }
  let s = String(x);
  let test = /(-?\d+(?:\.\d*)?)F\b/g;
  return s.replace(test, convert);
}
					

规范

规范
ECMAScript (ECMA-262) The definition of 'String.prototype.replace' in that specification.

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更新 GitHub 上的兼容性数据

	Desktop						Mobile						Server
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet	Node.js
replace	Chrome 1	Edge 12	Firefox 1	IE 4	Opera 4	Safari 1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0	nodejs 0.1.100

图例

完整支持

完整支持

另请参阅

• String.prototype.replaceAll()
• String.prototype.match()
• RegExp.prototype.exec()
• RegExp.prototype.test()

元数据

• 最后修改： Jul 16, 2020

相关话题

1. 标准内置对象
2. String
3. 特性
   1. String 长度
4. 方法
   1. String.fromCharCode()
   2. String.fromCodePoint()
   3. String.prototype.anchor()
   4. String.prototype.big()
   5. String.prototype.blink()
   6. String.prototype.bold()
   7. String.prototype.charAt()
   8. String.prototype.charCodeAt()
   9. String.prototype.codePointAt()
   10. String.prototype.concat()
   11. String.prototype.endsWith()
   12. String.prototype.fixed()
   13. String.prototype.fontcolor()
   14. String.prototype.fontsize()
   15. String.prototype.includes()
   16. String.prototype.indexOf()
   17. String.prototype.italics()
   18. String.prototype.lastIndexOf()
   19. String.prototype.link()
   20. String.prototype.localeCompare()
   21. String.prototype.match()
   22. String.prototype.matchAll()
   23. String.prototype.normalize()
   24. String.prototype.padEnd()
   25. String.prototype.padStart()
   26. String.prototype.repeat()
   27. String.prototype.replace()
   28. String.prototype.replaceAll()
   29. String.prototype.search()
   30. String.prototype.slice()
   31. String.prototype.small()
   32. String.prototype.split()
   33. String.prototype.startsWith()
   34. String.prototype.strike()
   35. String.prototype.sub()
   36. String.prototype.substr()
   37. String.prototype.substring()
   38. String.prototype.sup()
   39. String.prototype.toLocaleLowerCase()
   40. String.prototype.toLocaleUpperCase()
   41. String.prototype.toLowerCase()
   42. String.prototype.toSource()
   43. String.prototype.toString()
   44. String.prototype.toUpperCase()
   45. String.prototype.trim()
   46. String.prototype.trimEnd()
   47. String.prototype.trimStart()
   48. String.prototype.valueOf()
   49. String.prototype[@@iterator]()
   50. String.raw()
5. 继承：
6. Function
7. 特性
   1. Function.arguments
   2. Function.caller
   3. Function.displayName
   4. Function.length
   5. Function.name
8. 方法
   1. Function.prototype.apply()
   2. Function.prototype.bind()
   3. Function.prototype.call()
   4. Function.prototype.toSource()
   5. Function.prototype.toString()
9. Object
10. 特性
    1. Object.prototype.__proto__
    2. Object.prototype.constructor
11. 方法
    1. Object.prototype.__defineGetter__()
    2. Object.prototype.__defineSetter__()
    3. Object.prototype.__lookupGetter__()
    4. Object.prototype.__lookupSetter__()
    5. Object.prototype.hasOwnProperty()
    6. Object.prototype.isPrototypeOf()
    7. Object.prototype.propertyIsEnumerable()
    8. Object.prototype.toLocaleString()
    9. Object.prototype.toSource()
    10. Object.prototype.toString()
    11. Object.prototype.valueOf()
    12. Object.setPrototypeOf()