[JS - 개념] String.prototype.replace()

 

[프로그래머스] level.1 이상한 문자 만들기

이 문제를 풀다가 replace를 너무 대충알았다고 생각했기에 공식문서와 찾아본 블로그를 바탕으로 정리해봤다. 

 

 

replace()

 

replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다.  

그 패턴은 문자열이나 정규식이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있다.

 

const p = 'I protect my dog.';

console.log(p.replace('dog', '$`monkey'));

// I protect my monkey.

 

 

기존 string

 이 메서드는 호출된 String 객체를 바꾸지 않고 단순히 새로운 문자열을 리턴한다.

 

 

문법

/**
     * Replaces text in a string, using a regular expression or search string.
     * @param searchValue A string or regular expression to search for.
     * @param replaceValue A string containing the text to replace. When the {@linkcode searchValue} is a `RegExp`, all matches are replaced if the `g` flag is set (or only those matches at the beginning, if the `y` flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.
     */
    replace(searchValue: string | RegExp, replaceValue: string): string;

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

 

sbustr  

 

newSubStr로 대체 될 String. 정규식이 아닌 글자 그대로의 문자열로 처리된다.

오직 첫 번째 일치되는 문자열만이 교체된다.

 

---

 

 

매개변수가 String으로 지정 되었을 때

replacement 문자열은 다음과 같은 특수 교체 패턴을 포함할 수 있다.

 

$$   ->  매치된 문자열을 삽입한다.

const p = 'I protect the dog I live with';

console.log(p.replace('dog', '$$monkey'));

// I protect the $monkey I live with

 

$&   ->  매치된 문자열을 삽입한다.

const p = 'I protect the dog I live with';

console.log(p.replace('dog', '$&monkey'));

// I protect the dogmonkey I live with

 

 $`   ->    매치된 문자열 앞쪽까지의 문자열을 삽입한다.

const p = 'I protect my dog.';

console.log(p.replace('dog', '$`monkey'));

// I protect my I protect my monkey.

 

 

 $'    ->   매치된 문자열 이후의 문자열을 삽입한다.

const p = 'I protect the dog I live with';

console.log(p.replace('dog', "$'monkey"));

// I protect the  I live withmonkey I live with

 

 

$n   ->  *n*이 1이상 99이하의 정수라면, 첫번째 매개변수로 넘겨진 RegExp 객체에서 소괄호로 묶인 *n*번째의 부분 표현식으로 매치된 문자열을 삽입합니다.

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

오 이렇게 또 하나 배워간다.

---

 

매개변수가 function으로 지정되었을 때

replace 두번째 매개변수로 함수를 지정할 수 있다. 

이 경우 함수는 정규표현식 매치가 수행된 후 호출될 것이다.

만약 정규표현식의 플래그로 글로벌(g)이 오는 경우, 함수는 매치될 때마다 계속 호출된다.

 

함수의 매개변수들은 다음과 같습니다.

 

Possible name	Supplied value
		match	매치된 문자열. (윗쪽의 $& 표현식으로 매치된 경우와 동일합니다.)
p1, p2, ...	윗쪽의 $n 표현식과 동일합니다. ($1은 p1, $2는 p2...) 예를 들어, 만약 정규표현식 /(\a+)(\b+)/ 이 주어진다면p1은 \a+와 매치되고 p2는 \b+와 매치됩니다.
offset	조사된 전체 문자열 중에서 매치된 문자열의 index.(예를 들어, 조사될 전체 문자열이 abcd이고, 매치된 문자열이 bc면 이 매개변수의 값은 1이 됩니다.)
string	조사된 전체 문자열 (replace를 호출한 string)

다음 예제는 newString을  'abc - 12345 - #$*%' 로 교체한다.

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

여기서 *는 0개이상 반복을 뜻한다. 

 

 

또 다른 예제

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

• ?:   
  • 이건  그룹화를 하지만  갭쳐기능을 사용하지 않는다.
• /b   
  • 이건 영문52개 + 숫자 10개 + _ (언더스코어) 가 아닌 나머지 문자에 일치하는 경계이다. 

예를 들자면 

/\ba/g  

위 표현식을 사용했을 때 다음 문자열에서 찾을 수 있는 결과를 예측해보자. 

 

-a

' a'

_a

 aa

star

 

-a  ' a'   aa    나머지는 선택되지 않는다. 

 

-a에서 a가 선택되는 이유는 -비 문자이며 a가 문자이므로 /b는 두 사이를 가리키기 때문이다.

 

'a'에서도 a 앞의 띄어쓰기는 비문자, a는 문자이므로 /b는 두 사이를 가리킨다.

 

_a 에서 a가 선택되지 않는 이유는 _기호는 문자로 취급하며 a도 문자이기 때문이다. 

 

aa에서 a가 선택된 이유는 문자열 제일 앞 또는 제일 뒤가 문자면 /b의 조건에 해당한다고 정의하기 때문이다. 

 

이를 활용하면 

 

She told me not to go  

 

이 문장에서 정확히 go앞에 to를 찾을 수 있다. 

 

/\bto\b/g

 

She told me not to  go

 

 

• /B
  • 비문자와 비문자 사이의 경계, 또는 문자와 문자 사이의 경계를 의미한다. 

 

 

 

 

---

source

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replace

https://choonse.com/2022/06/01/1033/

정규 표현식 정리 끝판왕 링크