[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replace [Back]  [Original]

String.prototype.replace() - JavaScript | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

String.prototype.replace()

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 7.

String replace() pattern , replacement . pattern RegExp . replacement . pattern , . .

In this article

const paragraph = "I think Ruth's dog is cuter than your dog!";

console.log(paragraph.replace("Ruth's", "my"));
// Expected output: "I think my dog is cuter than your dog!"

const regex = /Dog/i;
console.log(paragraph.replace(regex, "ferret"));
// Expected output: "I think Ruth's ferret is cuter than your dog!"

js
replace(pattern, replacement)

pattern

Symbol.replace . . Symbol.replace .

replacement

.

  • , pattern . .
  • . .

, .

. .

. g replaceAll() .

pattern Symbol.replace (RegExp ) , replacement . replace() . replace() [Symbol.replace]() . , " " RegExp.prototype[Symbol.replace]() .

pattern .

js
"xxx".replace("", "_"); // "_xxx"

g replace() . ( sticky ) replace() RegExp.prototype[Symbol.replace]() .

.

$$ "$" .
$& .
$` .
$' .
$n n(1 ) . n 100 .
$<Name> Name .

$n $<Name> pattern RegExp . pattern . ( ) .

js
"foo".replace(/(f)/, "$2");
// "$2oo";      .

"foo".replace("f", "$1");
// "$1oo";  ,    .

"foo".replace(/(f)|(g)/, "$2");
// "oo";      .

. . ( ) .

: .

.

js
function replacer(match, p1, p2, /* , */ pN, offset, string, groups) {
  return replacement;
}

.

  • match
    • : . $& .
  • p1, p2, , pN
    • : replace() ( ) n RegExp . ( $1, $2 .) pattern /(\a+)(\b+)/, p1 \a+ p2 \b+ . (: "abc".replace(/(a)|(b)/, replacer)), undefined .
  • offset
    • . 'abcd' 'bc' 1 .
  • string
    • : .
  • groups
    • : ( undefined) . pattern .

RegExp , .

newString 'abc - 12345 - #$*%' .

js
function replacer(match, p1, p2, p3, offset, string) {
  // p1    p2  , p3    .
  return [p1, p2, p3].join(" - ");
}
const newString = "abc12345#$*%".replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString); // abc - 12345 - #$*%

.

replace()

replace() / .

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

'Twas the night before Christmas...' .

: .

replace()

. replace() 'apple' 'orange' .

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

'oranges are round, and oranges are juicy' .

. , $1 $2 .

js
const re = /(\w+)\s(\w+)/;
const str = "Maria Cruz";
const newstr = str.replace(re, "$2, $1");
console.log(newstr); // Cruz, Maria

'Cruz, Maria' .

. .

.

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

styleHyphenFormat('borderTop') 'border-top' .

. toLowerCase() . toLowerCase() .

js
//  
const newString = propertyName.replace(/[A-Z]/g, "-" + "$&".toLowerCase());

'$&'.toLowerCase() ( '$&' ).

. "F" . "C" . "212F" "100C" . "0F" "-17.777777777778C" .

test F . p1 . f2c() . f2c() . Perl s///e .

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

. replacer offset .

js
"abcd".replace(/(bc)/, (match, p1, offset) => `${match} (${offset}) `);
// "abc (1) d"

. , . offset, string . ID groups offset .

js
function addOffset(match, ...args) {
  const offset = args.at(-2);
  return `${match} (${offset}) `;
}

console.log("abcd".replace(/(bc)/, addOffset)); // "abc (1) d"
console.log("abcd".replace(/(?<group>bc)/, addOffset)); // "abc (abcd) d"

addOffset . args.at(-2) offset string .

groups string .

js
function addOffset(match, ...args) {
  const hasNamedGroups = typeof args.at(-1) === "object";
  const offset = hasNamedGroups ? args.at(-3) : args.at(-2);
  return `${match} (${offset}) `;
}

console.log("abcd".replace(/(bc)/, addOffset)); // "abc (1) d"
console.log("abcd".replace(/(?<group>bc)/, addOffset)); // "abc (1) d"

Specification
ECMAScript 2027 LanguageSpecification
# sec-string.prototype.replace


Web Proxy Viewer  |  New URL  |  Original Page