[ JS ] 문자열내의 특정 문자열 모두 대치하기

0. 개요

 

js로 프로젝트 진행 중 최근에 새롭게 업데이트된 문자열 메서드를 공부하고 적용하고자 이 글을 작성함

 

1. 학습목적

 

문자열에서 특정 문자열을 모두 대치하는 다양한 메서드 확인

실전에서 활용 가능한 다양한 문자열 치환법 학습

 

2. 학습내용

 

js에는 prototype을 통해 지정된 다양한 메서드들이 존재합니다.

이 메서드를 통해 어렵게 구성해야 할 코드들을 간단하게 만들 수 있습니다.

 

만약 문자열에서 특정 문자를 찾고자 한다면, 우린 단순히 indexOf 라는 메서드를 통해 문자 내 특정 문자의 위치를 쉽게 찾을 수 있습니다.

"abcdefg".indexOf(c) // 2

 

하지만 indexOf 메서드가 없다면?

function findIndexOfChar ( base_string, character ) {
	for (var i = 0; i < base_string.length; i++) {
    	if ( base_string[i] === character ) return i;
    }
}

findIndexOfChar( "abcdefg", "c" ) // 2

 

코드 작성시간이 길어지고 그 길이도 길어지겠죠.

이를 위해서 효율적인 메서드의 활용은 굉장히 중요한데, 최근 문자열의 치환에 관련된 새로운 메서드가 추가되었습니다.

 

1) 기존에 문자열을 치환하기 위한 방법

 

기존에 이전 문자열을 바꾸기 위한 방법에는 여러가지가 있었습니다.

대표적으로는 replace() 메서드가 있는데,

 

"abcdefgabc".replace("abc", "xxx") // "xxxdefgabc"

 

이런식으로 조건에 맞는 부분을 찾아 주어진 문자열로 치환합니다.

하지만 이 방식의 단점은 일치하는 가장 앞쪽 문자열만 치환된다는 것이었는데요, 이를 해결하기 위해 많은 개발자들은 '정규식'을 사용했습니다.

정규식을 사용하여 조건에 맞는 모든 문자열을 바꿔주는 코드는 아래와 같이 바뀝니다:

 

"abcdefgabc".replace(/abc/g, "xxx") // xxxdefgxxx

 

 

 

해당 패턴에 부합하는 다양한 위치가 존재할 경우 모든 위치의 값이 변경됩니다. ( 정규식의 'g' 키워드 덕분 )

 

2) 새롭게 추가된 메서드: replaceAll()

 

새롭게 추가된 replaceAll은 위에서 정규식을 쓰는 과정을 덜어줍니다.

 

"abcdefgabc".replaceAll("abc", "xxx") // xxxdefgxxx

 

심플해졌죠.

단, 기존에 사용하던 정규식 방식은 항상 'g' 키워드를 붙여야 합니다.

 

"abcdefgabc".replaceAll(/abc/, "xxx") // TypeError: replaceAll must be called with a global RegExp
"abcdefgabc".replaceAll(/abc/g, "xxx") // "xxxdefgxxx"

 

단, 주의할 점은 이 메서드가 지원되지 않는 브라우저들이 존재한다는 점입니다.

크롬과 edge는 85버전 이상, Node는 15버전 이상, IE는 미지원입니다.

 

+) 여담

 

인터넷에 올라온 글들을 보니 업데이트 된지 1년 조금 넘은 것 같습니다.

아직 vscode에서는 메서드리스트에 표시되진 않네요.

 

 

3. 정리

String.prototype.replaceAll() 메서드가 추가됨

정규식이나 for문 없이 모든 문자열 대체가 가능

구형 브라우저 미지원.