정규 표현식 에서의 특수 문자 이스케이프 (feat: 및줄)

개요

정규 표현식은 문자열 검색 및 치환 등의 작업에 사용되는 강력한 도구입니다. 그러나 정규 표현식 내에서는 특정 특수 문자들이 특별한 의미를 가지고 있습니다. 예를 들어:

• . : 어떤 문자와도 일치합니다.
• * : 앞의 문자나 그룹이 0번 이상 반복됩니다.
• + : 앞의 문자나 그룹이 1번 이상 반복됩니다.

그러므로, 이러한 특수 문자들을 문자 그대로 검색하려면 이스케이프 처리가 필요합니다.

 

escapeRegExp 함수

이스케이프 처리는 특수 문자 앞에 역슬래시(\)를 붙여주는 것을 말합니다.

/**
 * 정규 표현식에서 사용되는 특수 문자를 이스케이프합니다.
 * @param {string} string - 이스케이프 할 문자열.
 * @returns {string} 이스케이프된 문자열을 반환합니다.
 */
const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

escapeRegExp 함수는 문자열 내의 특수 문자들을 자동으로 이스케이프 처리하여 반환해줍니다.

네, 해당 escapeRegExp 함수는 정규 표현식에서 사용되는 특수 문자들을 이스케이프하는 역할을 합니다. 함수의 로직과 함께 해당 정규 표현식의 역할을 자세히 설명드리겠습니다.

함수의 로직:

escapeRegExp 함수는 입력된 문자열 string에 포함된 정규 표현식에서 사용되는 특수 문자들을 이스케이프 (즉, \ 문자를 앞에 붙여서 문자 그대로 해석되게 하는 것) 합니다.

이스케이프 과정:

replace 메서드는 위의 정규 표현식을 사용하여 string에서 정규 표현식의 특수 문자들을 찾아 이스케이프 처리합니다. 그리고 이스케이프 처리된 문자열을 반환합니다.

예:

const testString = "a.b*c+?^$|[]{}()";
console.log(escapeRegExp(testString)); // "a\.b\*c\+\?\^\$\|\[\]\{\}\(\)"

이런 방식으로, escapeRegExp 함수는 정규 표현식에서 사용되는 특수 문자들을 문자 그대로 해석될 수 있도록 이스케이프 처리해 줍니다.

문자열에서의 특정 텍스트 언더라인 처리

이제 이스케이프 처리된 문자열을 사용하여, 주어진 문자열에서 특정 텍스트를 언더라인 처리하는 예제를 살펴보겠습니다.

const underlineText = ({ inputString, targetText }) => {
  if (!inputString || !targetText) return "";
  const regex = new RegExp(escapeRegExp(targetText), "g");
  return inputString.replace(regex, `<u>${targetText}</u>`);
};

예제와 결과값

이제 위에서 설명한 함수를 사용하여 실제 예제를 살펴보겠습니다.

1. escapeRegExp를 사용할 때:

정규 표현식의 특수 문자들을 그대로 문자로 인식하게 됩니다. 즉, .이나 *와 같은 문자를 그대로 . 혹은 *로 인식하게 됩니다.

2. escapeRegExp를 사용하지 않을 때:

정규 표현식의 특수 문자들이 특별한 의미로 동작합니다. 예를 들어, .는 모든 문자와 일치하게 되고, *는 앞의 문자가 0번 이상 반복되는지를 확인하게 됩니다.

예제:

inputString이 "a.b*c"이고, targetText가 "."일 경우:

1. escapeRegExp를 사용할 때: "."는 그대로 점 문자로 인식되어 a.b*c에서 . 문자만을 대상으로 변경합니다.
   결과: a<u>.</u>b*c
2. escapeRegExp를 사용하지 않을 때: "."는 정규 표현식에서 모든 문자와 일치하는 특수 문자로 인식되어 a.b*c의 모든 문자를 대상으로 변경합니다.
   결과: <u>a</u><u>.</u><u>b</u><u>*</u><u>c</u>

에러 발생 상황:

escapeRegExp를 사용하지 않고, targetText에 정규 표현식의 특수 문자가 포함되어 있을 때 예상치 못한 동작이나 에러가 발생할 수 있습니다.

예:
inputString이 "a[b*c"이고, targetText가 "["일 경우:

1. escapeRegExp를 사용할 때: "[b*c"에서 [ 문자만을 대상으로 변경합니다.
   결과: a<u>[</u>b*c
2. escapeRegExp를 사용하지 않을 때: "[는 문자 집합의 시작을 나타내는 특수 문자로 인식되어 에러가 발생합니다. (Uncaught SyntaxError: Invalid regular expression: /[/: Unterminated character class)

결론적으로, escapeRegExp는 정규 표현식의 특수 문자를 그대로 문자로 인식하도록 도와주며, 예상치 못한 동작이나 에러를 방지해줍니다.

 

결론

정규 표현식을 사용할 때 특수 문자를 문자 그대로 검색하고 싶다면, 반드시 이스케이프 처리가 필요합니다. 이를 위해 escapeRegExp 함수와 같은 도우미 함수를 사용하면 편리하게 작업을 수행할 수 있습니다.