자바스크립트 RegExp 에서 변수 사용하기

정규식은 생각보다 많이 쓴다. 내 코드에서도 남의 코드를 볼 때도.

그렇다면 정규식 내에서는 변수를 어떻게 사용해야 할까?

일단 replace(정규식, 바꿀 문자열) 의 정규식 /ab+c/ 에서는 변수를 사용할 수 없다.

사용하려면 RegExp 를 사용해야 한다. RegExp를 생성하는 방법은 두 가지가 있다.

new RegExp(/ab+c/, 'i') // 리터럴
new RegExp('ab+c', 'i') // 생성자

리터럴 방식은 빗금으로 감싸는 기존 정규식과 같다.

생성자는 따옴표를 사용한다.

두 번째 생성자 방식으로 변수를 설정할 수 있다.

    const url = 'https://www.wlog.app';
    let content = '[나는 콘텐츠입니다.](https://www.wlog.app)';
    const regPrep = `\\[.+?\\]\\(${url}\\)`;
    const re = new RegExp(regPrep, "gi");
    const title = '나는 변경된 콘텐츠 타이틀입니다';
    const replace = `[${title}](${url})`;
    content = content.replace(re, replace);

regPrep 에서는 객체 리터럴로 변수를 결합한 것을 볼 수 있다. 여기서 back slash \ 를 사용한 것에 주목해 보자. [ , ( 등의 기호를 문자열 자체로 사용하려면 정규식에서 \ 로 escape를 해줘야 한다. 그래서 [ 는 \[ 로 사용을 해야 한다. 그런데 RegExp에 넣는 순간 따옴표가 \ 를 한개 소모를 해버리기 때문에 쌍 백슬래시로 문자 처리를 해주었다. 이게 좀 특이한 부분이다.

url의 / 는 따로 처리를 해주지 않았는데 RegExp에서는 / 를 자동으로 \ 를 붙여 \/ 로 만들어주기 때문에 신경을 안써도 된다. 이 부분은 좀 편하다.

나머지는 기존 정규식과 동일하게 사용해주면 된다. 예를 들어 .+? 는 어떤 문자이든지 (.) 한 개 이상 나오고 (+) 한개가 나오면 더이상 검색하지 않는다 (?) 의 식을 사용했다.

따라서 위의 정규식은 [any character](url) 과 같은 형태를 찾는 정규식이 된다. 마크 다운을 아는 사람이라면 마크다운 링크를 찾는 식이라는 것을 알 수 있을 것이다.