[JavaScript] str.(replace/replaceAll) - 지정한 문자 치환 및 공백 제거

script에서 제공해주고 있는 String.prototype.replace() 와 String.prototype.replaceAll() 에 대해 배워보자.

replace() 메서드는 script에서 오랫동안 존재해왔지만 replaceAll() 메서드는 생긴지 별로 안됐다.

(그래서 그런지 replace의 역할이 java와는 다르다는 점을 인지하고 가면 좋다 생각한다.)

 

replaceAll() 메서드는 ES12에 새롭게 추가된 기능이나 최신 크롬버전 같은 곳에서는 이미 내장 되어 지원하고있다.

(MDN에서도 아직 한국어 버전이 없더라...)

 

이제 하나씩 알아가 보도록 하자.

---

1. String.prototype.replace()

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

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

 

1-1. 구문과 사용법

▷ 구문

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

regexp : 정규식(RegExp) 객체 또는 리터럴을 의미하며, 일치하는 항목은 newSubStr 또는 지정된 함수(function)가 반환 한 값으로 대체된다.

substr : newSubStr이나 function의 반환값으로 대체될 문자열이며, 오직 첫 번째 일치되는 문자열만이 교체된다.

newSubstr : 첫번째 파라미터를 대신할 문자열이며, 여러가지 대체 패턴 패턴들을 지원한다.(MDN 참고)

function : 첫번째 파라미터에 일치하는 요소를 대체하는 데 사용될 새 하위 문자열을 생성하기 위해 호출되는 함수이다.

 

▷ 예제 1 ) String.prototype.replace() 메서드 기본 사용법

let str = ' replace, replaceAll 메서드 테스트 ';
console.log(str.replace('replace', 'method'));
// ' method, replaceAll 메서드 테스트 '

let newStr = str.replace('replace', (substr, offset, targetStr) => {
    // substr : 'replace'
    // offset : 1 (substr가 탐색된 위치 index)
    // targetStr : 메서드를 사용하는 대상 문자열
    return 'method';
});
console.log(newStr);
// ' method, replaceAll 메서드 테스트 '

 

정규식이 아닌 문자열을 기준으로 삼아 사용한 replace() 메서드이다.

구문에서 설명한 것 처럼 replace()메서드는 문자열을 기준으로 삼을 경우 오직 첫 번째 일치되는 문자열만이 교체된다.

(그래서 공백제거 역시 정규표현식을 사용해야만 하는것이다.)

 

그리고 대체 문자열을 함수로 사용한 예제에서는 매개변수가 존재하는데, 이는 기준을 정규식으로 사용했나 문자열로 사용했나에 따라서 매개변수의 의미와 개수가 달라진다.

 

우선 문자열을 기준으로 삼았을 경우 기준 문자열, 탐색된 위치, 메서드를 사용하는 대상 문자열을 매개변수로 전달해주고 있는데, 만약 기준문자열이 탐색이 안됐을 경우에는 메서드가 실행되지 않는다.

 

 

▷ 예제 2 ) 정규식을 활용한 기본 사용법 (ft. 공백제거)

let str = ' replace, replaceAll 메서드 테스트 ';
console.log(str.replace(/replace/gi, 'method'));
// ' method, methodAll 메서드 테스트 '

let newStr = str.replace(/replace/gi, (substr, offset, targetStr) => {
    // substr : 'replace'
    // offset : 1 (substr가 탐색된 위치 index)
    // targetStr : 메서드를 사용하는 대상 문자열
    return 'method';
});
console.log(newStr); // ' method, methodAll 메서드 테스트'

// etc. 공백제거
console.log(str.replace(/\s/g, '')); // 'replace,replaceAll메서드테스트'

 

정규표현식을 사용할 경우 매치되는 모든 문자열을 치환한다.

 

정규표현식을 사용할 때 대체 문자열 부분에 함수를 사용할 경우 만약 정규식에 'g'가 붙어있을 경우 매치되는 횟수반큼 해당 함수가 반복되서 실행된다.

 

예제1에서 분명 정규표현식을 사용할 경우 함수의 매개변수의 종류와 의미가 달라진다고 하였는데 일반적으로는 같은 의미를 가진 매개변수를 사용하며 다음 예제를 통해 좀 더 자세히 알아보도록 하자.

 

 

▷ 예제 3 ) 정규식을 사용할 경우 함수의 매개변수 의미 변화

function replacer(substr, p1, p2, p3, offset, targetStr) {
  // 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 - #$*%

 

예제 3을 보면 p1, p2, p3이라는게 추가적으로 생겼는데, 이는 정규표현식에서 소괄호로 묶이는 부분표현식의 개수에 따라 달라진다 (개수가 변동된다는 의미이다.)

---

2. String.prototype.replaceAll()

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

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

 

2-1. 구문과 사용법

▷ 구문

let newStr = str.replaceAll(regexp|substr, newSubstr|function)

regexp : 정규식(RegExp) 객체 또는 리터럴을 의미하며, 일치하는 항목은 newSubStr 또는 지정된 함수(function)가 반환 한 값으로 대체된다.

substr : newSubStr이나 function의 반환값으로 대체될 문자열이며, 일치되는 모든 문자열이 교체된다.

newSubstr : 첫번째 파라미터를 대신할 문자열이며, 여러가지 대체 패턴 패턴들을 지원한다.(MDN 참고)

function : 첫번째 파라미터에 일치하는 요소를 대체하는 데 사용될 새 하위 문자열을 생성하기 위해 호출되는 함수이다.

 

▷ 예제 1 ) String.prototype.replaceAll() 메서드 기본 사용법

let str = ' replace, replaceAll 메서드 테스트 ';
console.log(str.replaceAll('replace', 'method'));
// ' method, methodAll 메서드 테스트 '

let newStr = str.replaceAll('replace', (substr, offset, targetStr) => 'method');
console.log(newStr);
// ' method, methodAll 메서드 테스트 '

 

replaceAll() 메서드는 replace()메서드와는 다르게 매치되는 모든 문자열을 대상으로 치환된다.

그렇다보니 대체문자열 부분에 함수를 사용할 경우 replace()메서드에서 정규식을 사용했을때처럼 매치된 개수만큼 해당 함수가 반복된다.

 

매치되는 모든 문자열을 대상으로 치환시킨다는 특징만 다르고, 나머지는 대체로 replace() 메서드와 동일하다.

 

java와는 다르게 replace() 메서드와 replaceAll() 메서드 둘 다 정규표현식이 가능하기 때문에 여기서는 무엇을 사용하든 상관이 없어 보인다.

---

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

String.prototype.replace() - JavaScript | MDN

참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

String.prototype.replaceAll() - JavaScript | MDN