javascript에서 문자열 치환(replace)

Front-End 개발을 하다보면 특정문자를 치환 할 일이 많은데, 자바스크립트에서도 문자열을 치환하는 기능을 제공한다.

함수명은 replace로 JAVA의 문자열 치환 메소드인 replace와 같은 이름을 사용한다.(단어 뜻도 치환, 변경이니까..)

사용법은 다음과 같다.

/**
* var newStr = str.replace(regexp|substr, newSubstr|function) - 공식문서 설명
* 첫 번쨰 매개변수는 문자열 or 정규식 , 두 번째 매개변수는 변경될 문자열 or 함수가 들어갈 수 있다.
*/
 
let str = 'This is Test & Test'; 
console.log(str.replace('Test', 'Pratice')); // 출력 : This is Pratice & Test 
 
// Test라는 단어를 모두 Pratice로 바꾸려면 정규식을 이용하면 된다.
console.log(str.replace(/Test/gi, 'Pratice')); // 출력 : This is Pratice & Pratice
 
// 다음으로는 두 번쨰 매개변수에 함수도 가능하다고 했으니 함수를 사용해보자
console.log(str.replace('test', (match, p1, p2, p3, offset, string) => {return string = 'Practice'} )); // This is Pratice & test
 
/**
* 함수를 넣었을 때 파라미터가 의미 하는 건 다음과 같다.(공식 문서의 내용)
* match    매치된 문자열. (윗쪽의 $& 표현식으로 매치된 경우와 동일합니다.)
* p1,
* p2,
* ...    윗쪽의 $n 표현식과 동일합니다. ($1은 p1, $2는 p2...) 예를 들어, 만약 정규표현식 /(\a+)(\b+)/ 이 주어진다면 p1은 \a+와 매치되고 p2는 \b+와 매치됩니다.
* offset    조사된 전체 문자열 중에서 매치된 문자열의 index.(예를 들어, 조사될 전체 문자열이 abcd이고, 매치된 문자열이 bc면 이 매개변수의 값은 1이 됩니다.)
* string    조사된 전체 문자열 (replace를 호출한 string)
*/
 

자바스크립트의 replace의 결과는 자바와 다르게 첫 번째 탐색된 문자를 치환하기 때문에 자바처럼 모든 탐색된 모든 문자열을 변경하고 싶다면 다음과 같은 공통함수를 사용해서 사용해보는 것도 좋을 것 같다.

function replaceRegExp(target) { // 문자열을 매개변수로 받아서 정규식으로 변환.
    return new RegExp(target, 'gi'); // new RegExp -> 정규식으로 변환해준다. 파라미터는 (target, flag(g,i...)
}
    
let str = 'This is test & test!';
console.log(str.replace(replaceRegExp('Test'), 'Pratice'));
 

 꼭 설명한 방법만이 정답이 아니고 여러가지 방법이 있을 수 있지만, 평소내가 사용하는 패턴대로 정리를 해보았다.

매번 replace를 사용할 때마다 찾아보는건 귀찮기 때문에 외우고 다니면서 사용하는게 좋을 것 같다.

 

참고 URL (Reference)

String.prototype.replace()

 

RegExp