Javascript - replace, replaceAll [문자 치환하기]

자바스크립트에서 특정 문자를 찾아 원하는 문자로 치환할 수 있는 replace()라는 API를 제공합니다. 오늘은 replace() 함수를 통해 문자 치환하는 기능을 다루어보겠습니다.

replaceAll()

replace()를 알아보기에 앞서 replaceAll() 함수에 대해 먼저 알아보겠습니다. 일단 Javascript의 내장 기능 중 replaceAll()은 없다고 생각하시는 게 좋습니다. ECMA-262 12th(2021) 스펙을 기준으로 replaceAll() 기능이 추가되었기 때문에 최신을 바탕으로 하는 개발 환경이 아니라면 replaceAll()은 사용하기가 어렵습니다.

See the Pen repalceAll by yongdae (@yongdae) on CodePen.

replace()

본격적으로 문자를 치환하는 함수인 replace()에 대해 알아보겠습니다. replace() 함수는 옵션을 통해서 특정식(정규식)을 사용할 수도 있지만, 기본적으로 동작하는 방식은 조건 대상이 되는 첫 번째 문자 하나만 치환합니다.

See the Pen Javacript - replace1 by yongdae (@yongdae) on CodePen.

예제와 같이 replace()는 문자에서 조건에 match 되는 첫 번째 문자 하나만을 치환해서 반환합니다. 여기서 한 가지 더 중요한 점은 replace()는 전달받은 문자를 수정하는 것이 아니라 새로운 값을 만들어 반환한다는 사실을 알고 있어야 합니다. 즉 새로 반환된 문자를 사용하지 않는 이상 기존의 문자는 그대로 존재하고 사용됩니다.

See the Pen Javacript - replace2 by yongdae (@yongdae) on CodePen.

 

 

replace()와 정규식(RegExp)을 활용해 replaceAll() 만들기

See the Pen Javascript - replace sample by yongdae (@yongdae) on CodePen.

앞서 말했듯이 replace() 함수는 기본 동작은 매칭 대상이 되는 첫 번째 문자를 반환해 새로운 문자를 반환하는 것입니다. 그렇기 때문에 모든 문자 치환 같은 기능은 replace()의 옵션 중 정규식을 사용해서 만들어야 합니다.

const replaceText = (source, findText, replaceText) => {
    return source.replace(new RegExp(`\\${findText}`, 'g'), replaceText);
};

예제 코드의 일부입니다. replace() 인자로 RegExp 식을 만들어 대상이 되는 모든 문자를 찾도록 합니다. 여기서 "g"를 쓰면 대소문자를 구분하고 "gi"를 사용하면 대소문자 구분을 하지 않습니다.

 

인터넷에 돌아다니는 모든 문자 치환과 관련된 자료 중 하나가 join()을 사용하는 방법인데, join()을 사용하려면 split()을 이용해 문자를 특정 문자를 기준으로 문자 배열로 만들어야 합니다. 이 방법은 효율적인 면에서도 기술적인 면에서도 권장드리는 방식은 아닙니다.