🧑🏻🏫 Intro
지난 번, 검색어와 검색 결과의 title에서 일치하는 글자를 볼드처리하는 기능을 구현했다.
모든 것이 끝났다고 생각해서 QA를 진행했는데, 왠걸...
단 한 글자만 입력해도 에러가 발생하는 상황이 생겼다..
🧑🏻💻 과정
집단지성... 그것보다 우선 갖춰야 할 부분은 영어...
특히 stackoverflow를 읽는 힘이랄까..?
검색창에 일반 텍스트를 입력했을 때는 발생하지 않았던 에러인데,
'[,],(,),+' 이 문자들을 입력하는 순간 아래와 같은 에러가 발생했다..
SyntaxError: Invalid regular expression: /([)/: Unterminated character class
에러 메세지를 보면 SyntaxError라고 하는데 어떤 문제일까 고민해 보니,
정규표현식에서 괄호나 플러스 문자가 다른 역할을 하고 있는 문자라서
이런 에러가 나오게 되는 것 같았다.
그래서 역시 모를 때는 갓 구글이기에 저 에러 메세지를 그대로 긁어서 검색했는데,
원하는 정답을 얻지를 못했다.. 아니 내가 그 답에 대한 응용력이 많이 부족했다.
그래서 결국 다른 개발자에게 도움을 요청했다.
💥 code
const escapeRegExp = (string: string) => {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
};
해결 방법은 의외로 간단했다.
escapeRegExp라는 함수를 만들어 인자로 검색어를 받게 했다.
이 검색어를 replace 메소드를 통해 에러를 일으킬 수 있는 특수문자앞에
역슬래시로 단순 문자열로 판별할 수 있도록 만들어줘서
정규표현식에서 에러를 일으키지 않고 사용할 수 있게 됐다.
const matchText = text.split(
new RegExp(`(${escapeRegExp(searchValue)})`, 'gi'),
);그래서 에러가 발생하는 부분에 해당 함수를 거친 문자열을 내보내
에러가 발생하지 않도록 처리해 주었다.
📌 결과
에러가 발생할 수 있는 문자를 대체해서 내보내 주니 에러가 발생하지 않는 것을 확인했다.
분명 여러 글들을 보면서 스쳐지나가면서 봤던 내용이긴 하지만,
어떻게 적용해야 할까에 대해서 굉장히 막막했었는데,
그런 부분들을 보면 아직 어떤 솔루션에 대해서 응용하는 방법이 그렇게 좋지 못하다고 느껴진다.
참고 문서
- 비슷한 솔루션 : stack over flow
