JavaScript 정규식(RegEx)으로 템플릿 데이터를 동적으로 치환하는 방법

템플릿 문자열 안의 {{fullName}}, {{countryName}} 같은 플레이스홀더를 실제 데이터로 바꾸려면 JavaScript의 replace() 메서드와 정규식(RegEx)을 함께 활용하면 됩니다. 이 방식은 간단한 템플릿 엔진 없이도 동적인 문자열 생성이 가능해 매우 유용합니다.

예제 코드

다음은 전체 예제 코드입니다.

var temp = `My name is {{fullName}} I live in {{countryName}}`;
var details = {
    "fullName": "David Miller",
    "countryName": "AUS"
}
replaceName = temp.replace(
    /\{\{(.+?)\}\}/g,
    (matching, value) => details[value.trim()]
);
console.log(replaceName);

코드 설명

/\{\{(.+?)\}\}/g 정규식은 문자열에서 이중 중괄호 {{ }}로 감싸진 모든 패턴을 찾아냅니다. 마지막의 g(global) 플래그 덕분에 일치하는 모든 항목이 한 번에 처리됩니다.

두 번째 인자로 전달된 콜백 함수는 매칭된 전체 문자열(matching)과 괄호로 캡처된 값(value)을 받습니다. 여기서 value.trim()으로 앞뒤 공백을 제거한 뒤, 그 값을 details 객체의 키로 사용해 실제 데이터를 조회하고 반환합니다.

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다.

node fileName.js

여기서는 파일 이름이 demo256.js라고 가정하겠습니다.

실행 결과

코드를 실행하면 콘솔에 아래와 같은 출력이 나타납니다.

PS C:\Users\Amit\javascript-code> node demo256.js
My name is David Miller I live in AUS

이처럼 정규식과 replace() 메서드만으로도 플레이스홀더 기반의 간단한 템플릿 치환 기능을 손쉽게 구현할 수 있습니다.