[BoostCourse] JavaScript - .replace() 문자열 바꾸기 (Feat. 정규표현식)

BoostCourse 진행 중에 HTML Template 해야하는 일이 생겨 정리

HTML Template (String.replace() 사용하기)

 - ${id}가 2개, ${description} 2개, ${placeName}, ${content}가 존재한다.

 - 위 문자열들을 바꿔야 하는데 JS에는 string에 replace()함수가 존재한다.

 - 하지만 replace()가지고는 {id}를 내가 원하는 변수의 값으로 바꾸기 위해서는 개수 대로 써줘야 한다.

 얼마나 멍청한 짓인고....

그래서 찾아봤다. 자바에 replaceAll같은 함수가 있는지.. 

하지만 JavaScript에는 replaceAll은 없고 정규표현식을 이용하여 replaceAll의 기능을 구현해야한다.

tempalte에 정의되어 있는 상태는 ${ 변수명 }를 바꾸어야한다.

MDN :: https://developer.mozilla.org/ko/docs/Web/JavaScript

위 사이트를 참조했을때 수행되어야할 일은 ${ }이와같은 특수문자로 감싼 데이터만을 골라 낸 뒤 바꿔야 한다.

 1. 일단 정규표현식의 패턴

/ 문자 /

  - 정규표현식은 슬래쉬로 감싸면 된다.

  - 또는 RegExp 생성자 함수를 호출한다.

var re = RegExp("문자");

  - 생성자 함수의 호출은 다른 출처로부터 패턴을 가져와야 하는 경우 사용한다.

 2. 사용해야할 정규표현식 문법

  - 우선 $ { } 같은 특수문자를 제거 해야 한다.

  - 특수문자를 특별하지 않은 문자로 인식하게 하는 방법은 역슬래시를 사용하는 것이다.

\$ \{  \}

  - 이렇게 되면 javascript는 아무것도 출력하지 않는다.

 3. 플래그를 사용한 고급검색 (replaceAll과 같은 전역검색)

  - g : 전역 검색

  - i : 대소문자 구분없는 검색

  - m : 다중행 검색

  - u : 유니코드 패턴을 유니코드 코드 포인트의 나열로 취급

  - y : "sticky" 검색을 수행, 문자열의 현재 위치부터 검색을 수행

 4. 결과적으로 정규표현식을 적용한 replace()

 결과물 

  - 문자열도 잘 바뀐 것 같고 화면도 나오긴 나온다.