[React] safari/iOS 에서 정규식 Invalid regular expression 에러 해결

 

 

SyntaxError: Invalid regular expression: invalid group specifier name

Next.js, React로 구성된 웹페이지에서 크롬이나 안드로이드에서는 오류가 발생하지 않지만 사파리나 아이폰에서 웹사이트 접속 시 위와 같은 에러가 발생하였습니다. 

 

💣 에러 원인

구글링하여 찾아본 결과 크롬에서는 작동하지만 파이어폭스 또는 사파리에서는 작동하지 않는 x(?<=y) x(?<!y)와 같은 정규표현식 lookbehind 문법을 사용한 것이 문제의 원인이었습니다.

 

📋 기존 코드

let number = 1000000.123;
     return number.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");

//returns 1,000,000.123

위와 같은 정규식에서 ?<! 과 같은 표기법은 최신 기법으로 익스, IOS, Safari에서 통하지 않는 스크립트입니다. 

 

따라서 아래와 같이 수정하여야 합니다.

📋 수정 코드

let number = 1000000.123;
     return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

//returns 1,000,000.123