크롬에서 되는 정규식이 사파리에서는 안될 때가 있습니다

대부분의 정규식은 다른 브라우저에서도 작동할 수 있지만, 특정 브라우저에서는 조금 다른 동작을 할 수도 있습니다.

만약 크롬에서 작동하는 정규식을 사파리에서도 잘 작동하도록 수정하려면, 일반적으로 다음과 같은 접근 방식을 추천합니다:

정규식 문법 확인하기: 정규식 문법은 다른 브라우저에서도 동일하게 작동합니다. 따라서, 문제가 발생할 수 있는 부분은 정규식 패턴에 사용되는 함수와 속성들일 수 있습니다.
브라우저 호환성 확인하기: 각 브라우저는 특정한 정규식 함수와 속성을 지원하거나 지원하지 않을 수 있습니다. 따라서, 사용하려는 정규식 함수와 속성이 사파리에서도 지원되는지 확인하는 것이 좋습니다.
테스트하기: 최종적으로, 작성한 정규식을 실제로 테스트해보는 것이 중요합니다. 특히, 크롬과 사파리에서 동일한 동작을 하는지 확인하는 것이 필요합니다.

만약 문제가 발생하면, 사파리에서 지원하지 않는 함수나 속성을 사용하고 있는지 확인하는 것이 좋습니다. 또한, 정규식 패턴을 수정하여 다른 동작을 하도록 할 수도 있습니다. 그러나 정확한 수정 방법은 문제의 원인과 정확한 정규식 패턴에 따라 달라질 수 있습니다.

 "1000".replace(/\B(?<!\.\d\*)(?=(\d\{3})+(?!\d))/g, ",");

이 정규식은 세 자리 수마다 쉼표(,)를 추가하여 숫자를 포맷하는 기능을 합니다. 예를 들어, "1000"이라는 문자열을 이 정규식으로 처리하면 "1,000"으로 변환됩니다.

이 정규식의 패턴은 다음과 같습니다.

/\B(?<!\.\d\*)(?=(\d\{3})+(?!\d))/g

\B: 단어 경계가 아닌 위치를 매치합니다.

(?<!\.\d\*): 이전 위치가 소수점과 숫자가 아닌 경우를 매치합니다. 이 부분은 소수점 이전의 세 자리 숫자를 매치하는 것을 방지합니다.

(?=(\d\{3})+(?!\d)): 다음 위치가 세 자리의 숫자 블록으로 이루어진 경우를 매치합니다. 이 부분은 세 자리 숫자 블록 뒤에 숫자가 없는 경우를 매치하는 것을 방지합니다.

/g: 전체 문자열에서 매치하는 모든 패턴을 찾습니다.

따라서, 위의 예시에서 "1000"이라는 문자열은 \B와 (?<!\.\d\*)에 의해 매치되지 않고, (?=(\d\{3})+(?!\d))에 의해 매치되어 "1,"와 "000"으로 분할되며, ,로 구분된 "1,"과 "000"이 반환되어 "1,000"으로 변환됩니다.

크롬과 사파리 모두 ECMAScript의 정규 표현식 표준을 따르기 때문에, 해당 정규식 패턴은 사파리에서도 작동합니다. 그러나 Safari 브라우저의 경우, lookbehind(전방탐색)을 지원하지 않습니다.

따라서, lookbehind를 대신하여 capturing group(캡처 그룹)을 사용하여 패턴을 수정할 수 있습니다. 아래와 같이 정규식을 수정하여 사파리에서도 동작하도록 만들 수 있습니다.

"1000".replace(/(\d)(?=(\d\{3})+(?!\d))/g, "$1,")

위의 패턴은 다음과 같이 구성됩니다.

(\d): 숫자 하나를 캡처하는 그룹입니다.

(?=(\d\{3})+(?!\d)): 다음 위치에 3개의 숫자를 캡처하는 그룹이 한 번 이상 나오는 경우를 찾습니다.

"$1,": 대체 문자열은 첫 번째 그룹인 숫자 뒤에 쉼표(,)를 추가합니다.

이렇게 수정된 정규식은 크롬과 사파리 모두에서 동작하며, "1000"을 "1,000"으로 변환하는 예제도 문제없이 작동할 것입니다.