자바스크립트 javascript 문자열 바꾸기 치환

replace

replace() 메서드는 지정된 문자열 또는 정규식패턴과 첫번째로 일치하는 문자열이 교체된 문자열을 반환합니다.
새로운 문자열을 반환합니다.

str.replace(regexp|substr, newSubstr|function)
regexp|substr: 변경 대상 문자열 혹은 정규식 패턴
newSubstr|function: 변경할 문자열

NOTE: 일치하는 첫번째 문자열만 변경합니다.

const str = 'I like you and I love you.';
console.log(str.replace('and', 'or'));
// output: "I like you or I love you."

console.log(str.replace('you', 'myself'));
// output: "I like myself or I love you."

console.log(str.replace(/you/, 'myself'));
// output: "I like myself or I love you."

첫번째 매치된 you만 변경되고 뒤에는 그대로 변경되지 않습니다.

NOTE: 정규식 플래그(g)를 사용하면 전부 변경할 수 있습니다.

replace with regex

replace 메서드는 정규식 패턴을 첫번째 인자로 받습니다.
정규식 패턴을 이용하여 문자열을 변경할 있는데 여기에 정규식 flag g(global)을 활용하여 일치하는 모든 문자를 변경할 수 있습니다.

const str = 'I like apple apple apple.';
console.log(str.replace(/apple/, 'banana'));
// output: "I like banana apple apple."

console.log(str.replace(/apple/g, 'banana'));
// output: "I like banana banana banana."

 

replace with regex 특수 교체 패턴

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

Pattern	Inserts
$$	"$" 기호를 삽입합니다.
$&	매치된 문자열을 삽입합니다.
$`	매치된 문자열 앞쪽까지의 문자열을 삽입합니다.
$'	매치된 문자열의 문자열을 삽입합니다.
$n	n이 1이상 99이하의 정수라면, 첫번째 매개변수로 넘겨진 RegExp객체에서 소괄호로 묶인 n번째의 부분 표현식으로 매치된 문자열을 삽입합니다.

• $n을 활용하여 매칭된 문자열을 재배치해보겠습니다.

const str = 'I like apple banana grape.';
console.log(str.replace(/(\w+) banana (\w+)/, '$2 kiwi $1'));
// output: "I like grape kiwi apple."

정규식 간단 설명
\w: 밑줄 문자를 포함한 영어, 숫자, 문자
+: 1번 이상 반복되는 문자열
(): 문자열 그룹으로 매칭되는 문자열을 기억합니다.
apple banana grape. -> apple($1), grape($2) -> grape kiwi apple. 이렇게 변경되었습니다.

• 정규식을 잘 활용한다면 어려운 일도 쉽게 해결할 수 있습니다.
  이번 기회에 정규식을 조금 더 공부해보시기 바랍니다.
  (저도 아직 잘 못합니다.. ㅎㅎ;)