정규식 lookbehind 문법 IPhone 호환

11월 11일 크롬이나 안드로이드에서는 정상적으로 작동하지만 Safari 및 FireFox 웹에서 회사 사이트가 작동하지 않고 있다는 것을 발견했습니다. 결론부터 말하자면 문제점의 원인은 정규식 lookbehind 문법을 사용했다는 것입니다.

사건의 발단

회사 사이트 현금 거래 Input 태그 속에 불필요한 문자를 담지 못하게 정규식을 추가했습니다.

1. 한글 및 영어 입력 방지
2. 앞에 숫자 '0'이 있을 시에 '0' 제거 ex) 01000은 1000으로 출력
3. 천의 자리 수마다 콤마(,) 출력

문제는 3번째 정규식에서 발생했고 정규표현식 lookbehind 문법의 문제가 있었습니다.

lookbehind 문법은 최근에 생긴 정규식 문법으로 ECMAScript 2018 스펙이래서 Chrome 브라우저에서만 사용이 가능하고 Safari, FireFox 브라우저는 지원이 되지 않습니다.

if (sender && sender > 0) {
    this.calculate(currency,this.withdrawalCalculator[currency].sender,false)
    this.withdrawalCalculator[currency].sender = this.withdrawalCalculator[currency].sender.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")
}

천의 자리 수마다 콤마(,)로 포매팅하는 정규식입니다. 위와 같은 정규식에서 ?<!와 같은 표기법은 최신 기법으로 IOS, 익스, Safari에서 작동하지 않습니다.

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

if (sender && sender > 0) {
    this.calculate(currency,this.withdrawalCalculator[currency].sender,false)
    this.withdrawalCalculator[currency].sender = this.withdrawalCalculator[currency].sender.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}

위와 같이 정규식을 기술해야 IOS, Safari에서 정상적으로 사용 가능합니다 :)