ES6: RegExp.prototype.unicode 이해하기
5 likes1,099 views
ES6에 추가된 RegExp.prototype.unicode 에 대한 설명 http://ohgyun.com/620
![Character classes
u 플래그는 캐릭터 클래스([])에 심볼이 포함된 경우도 한 글자로 처리한다.
let regex = /^[ab!]$/;
regex.test('a'); //-> true
regex.test('b'); //-> true
regex.test('!'); //-> false
마찬가지로 위 코드는 실제로 아래와 같이 서로게이트 페어로 나뉘어지기 때문이다.
let regex = /^[abuD83DuDCA9]/;
u 플래그를 적용한 경우, 의도한 대로 유니코드도 매칭된다.
let regex = /^[ab!]$/u;
regex.test('!'); //-> true](https://image.slidesharecdn.com/understandinges6regexpprototypeunicode-151116093909-lva1-app6891/85/ES6-RegExp-prototype-unicode-13-320.jpg)
![u 플래그를 사용하면 astral 캐릭터로 레인지를 표현할 수도 있다.
let regex = /[!-"]/u; // U+1F4A9 부터 U+1F4AB 까지의 심볼을 매칭한다.
regex.test('#'); //-> true (U+1F4AA)
regex.test('$'); //-> true (U+1F4AC)
u 플래그를 생략하면 range 에러가 발생하는데,
실제로 아래처럼 첫 번째 글자의 마지막 서로게이트와 두 번째 글자의 첫 서로게이트의 범위를 설정하려고 하기 때문이다.
let regex = /[!-"]/; //-> throws error
let regex = /[uD83DuDCA9-uD83DuDCAB]/;](https://image.slidesharecdn.com/understandinges6regexpprototypeunicode-151116093909-lva1-app6891/85/ES6-RegExp-prototype-unicode-14-320.jpg)
![같은 맥락에서, ES5에서는 negate 캐릭터(^)도 astral 캐릭터를 매칭하지 못했다.
/^[^a]$/.test('!'); //-> false
마찬가지로, 서로게이트 페어로 분리되어 매칭하기 때문이며,
/^[^a]$/u.test('!'); //-> true](https://image.slidesharecdn.com/understandinges6regexpprototypeunicode-151116093909-lva1-app6891/85/ES6-RegExp-prototype-unicode-15-320.jpg)
![Character class escapes
몇 가지 예약된 클래스 이스케이프가 있는데, u 플래그에서도 위에서 언급한 예제와 비슷한 맥락으로 동작한다.
d = [0-9]
D = [^0-9]
s = 공백 캐릭터
S = 공백 캐릭터가 아닌 캐릭터
w = [0-9a-zA-Z_]
W = [^0-9a-zA-Z_]
/^[^S]$/.test('!'); //-> false
u 플래그가 없다면 마찬가지로 서로게이트 페어로 분리되어 매칭하지 못한다.
/^[^S]$/u.test('!'); //-> true](https://image.slidesharecdn.com/understandinges6regexpprototypeunicode-151116093909-lva1-app6891/85/ES6-RegExp-prototype-unicode-16-320.jpg)
![With i flag
i 플래그를 u 플래그와 함께 쓰는 경우, 기본 아스키 범위 외의 유니코드 문자열과 알파벳 대소문자를 매칭할 수 있다.
let es5regex = /[a-z]/i;
let es6regex = /[a-z]/iu;
let K = 'u212A'; // 기본 알파벳이 아닌 대문자 K
es5regex.test(K); //-> false
es6regex.test(K); //-> true](https://image.slidesharecdn.com/understandinges6regexpprototypeunicode-151116093909-lva1-app6891/85/ES6-RegExp-prototype-unicode-17-320.jpg)
ES6: RegExp.prototype.unicode 이해하기
- 2. JSConf EU 2015 컨퍼런스에서 Mathias Bynens가 발표한 ES6의 RegExp.prototype.unicode 동영상을 정리하고 설명을 덧붙임 원본: https://www.youtube.com/watch?v=raJcug_vW0c
- 3. 자바스크립트에서도 캐릭터의 symbol을 직접 사용할 필요 없이, U+ 와 16진수 숫자(hexadecimal)로 코드 포인트를 직접 참조할 수 있다. 유니코드의 범위는 아래와 같이 크게 세 가지로 나눌 수 있다. Unicode range - U+000000 ~ U+10FFFF BMP range (Basic Multilingual Plane) - U+000000 ~ U+00FFFF - 기본적인 다국어를 포함하는 범위 Astral planes range - U+010000 ~ U+10FFFF (전체 범위의 95% 이상) - 기본적인 다국어 외 이모지 등을 포함
- 4. 자바스크립트는 Astral planes 를 두 개의 코드 포인트로 나눠 처리한다. 각각의 코드 포인트를 'surrogate half'라고 부르고, 두 코드 포인트의 조합을 'surrogate pair'라고 한다. 아래 코드를 보면 동작 방식을 이해할 수 있다. 예를 들어, !와 같이 Astral plane 레인지에 포함되어 있는 캐릭터가 있다고 가정해보자. let poo = '!'; 한 글자이지만 실제로 length를 조회해보면 2 가 리턴된다. poo.length; //-> 2
- 5. 캐릭터의 각 인덱스에 있는 코드를 확인해보자. poo.charCodeAt(0); //-> 55357 poo.charCodeAt(0).toString(16); //-> 'd83d' poo.charCodeAt(1); //-> 56489 poo.charCodeAt(1).toString(16); //-> 'dca9'
- 6. 실제로 ! 캐릭터는 아래처럼 두 개의 유니코드로 구성되어 있다. (서로게이트 페어) let poo2 = 'uD83DuDCA9'; 물론, 두 값을 비교해도 같다. poo === poo2; //-> true
- 7. 코드 포인트를 브레이스({})로 감싸 표현하면, 자바스크립트의 기본 표현 범위(uXXXX)보다 더 큰 값의 코드 포인트를 참조할 수 있다. let poo3 = 'u{1F4A9}'; poo2 === poo3; //-> true
- 8. 위처럼 Astral plane range에 있는 캐릭터가 서로게이트 페어로 나뉘어지는 구조 때문에, ES5에서는 Astral 캐릭터들은 정규식에서 매칭하기 어려웠다. ES6부터는 유니코드 처리를 위한 RegExp.prototype.unicode 를 추가했고, 지금부터 설명할 u 플래그로 손쉽게 처리할 수 있게 되었다.
- 9. u flag ES6에서는 정규식에서 유니코드를 처리할 수 있는 u 플래그가 추가됐다. /u{61}/u.test('a'); //-> true /u{1F4A9}/u.test('!'); //-> true
- 10. u 플래그를 생략하면 브레이스({})를 정규식의 한정 수량자로 인식한다. /u{61}/.test('a'); //-> false, 이 정규식 구문은 'u'가 61개 있는 패턴을 의미한다. u 플래그가 추가되면, 정규식이 스트릭트 모드(strict mode)로 동작한다고 생각하면 된다. /abc/.test('abc'); //-> true, ES5에선 백슬래시() 뒤에 예약된 캐릭터가 오지 않는 경우 백슬래시를 무시했다. /abc/u.test('abc'); //-> throws error
- 11. dot(.) operator u 플래그가 붙은 경우, 닷(.) 오퍼레이터는 astral plane 에 포함된 문자열까지 포함한다. let poo = 'a!b'; /a.b/.test(poo); //-> false /a.b/u.test(poo); //-> true
- 12. quantifiers (수량자) u 플래그는 astral 심볼도 한 글자로 가정해 매칭한다. /a{2}/.test('aa'); //-> true /!{2}/.test('!!'); //-> false ES5에서 위 코드는 실제로 아래와 같이 서로게이트 페어로 나뉘어져 동작한다. /uD83DuDCA9{2}/.test('uD83DuDCA9uD83DuDCA9'); //-> false u 플래그를 사용한다면 아래처럼 의도한 결과를 볼 수 있다. /!{2}/u.test('!!'); //-> true
- 13. Character classes u 플래그는 캐릭터 클래스([])에 심볼이 포함된 경우도 한 글자로 처리한다. let regex = /^[ab!]$/; regex.test('a'); //-> true regex.test('b'); //-> true regex.test('!'); //-> false 마찬가지로 위 코드는 실제로 아래와 같이 서로게이트 페어로 나뉘어지기 때문이다. let regex = /^[abuD83DuDCA9]/; u 플래그를 적용한 경우, 의도한 대로 유니코드도 매칭된다. let regex = /^[ab!]$/u; regex.test('!'); //-> true
- 14. u 플래그를 사용하면 astral 캐릭터로 레인지를 표현할 수도 있다. let regex = /[!-"]/u; // U+1F4A9 부터 U+1F4AB 까지의 심볼을 매칭한다. regex.test('#'); //-> true (U+1F4AA) regex.test('$'); //-> true (U+1F4AC) u 플래그를 생략하면 range 에러가 발생하는데, 실제로 아래처럼 첫 번째 글자의 마지막 서로게이트와 두 번째 글자의 첫 서로게이트의 범위를 설정하려고 하기 때문이다. let regex = /[!-"]/; //-> throws error let regex = /[uD83DuDCA9-uD83DuDCAB]/;
- 15. 같은 맥락에서, ES5에서는 negate 캐릭터(^)도 astral 캐릭터를 매칭하지 못했다. /^[^a]$/.test('!'); //-> false 마찬가지로, 서로게이트 페어로 분리되어 매칭하기 때문이며, /^[^a]$/u.test('!'); //-> true
- 16. Character class escapes 몇 가지 예약된 클래스 이스케이프가 있는데, u 플래그에서도 위에서 언급한 예제와 비슷한 맥락으로 동작한다. d = [0-9] D = [^0-9] s = 공백 캐릭터 S = 공백 캐릭터가 아닌 캐릭터 w = [0-9a-zA-Z_] W = [^0-9a-zA-Z_] /^[^S]$/.test('!'); //-> false u 플래그가 없다면 마찬가지로 서로게이트 페어로 분리되어 매칭하지 못한다. /^[^S]$/u.test('!'); //-> true
- 17. With i flag i 플래그를 u 플래그와 함께 쓰는 경우, 기본 아스키 범위 외의 유니코드 문자열과 알파벳 대소문자를 매칭할 수 있다. let es5regex = /[a-z]/i; let es6regex = /[a-z]/iu; let K = 'u212A'; // 기본 알파벳이 아닌 대문자 K es5regex.test(K); //-> false es6regex.test(K); //-> true
- 18. 하지만 W 와 함께 쓰는 경우엔 좀 헷갈리는 결과가 나온다. let es5regex = /W/i; let es6regex = /W/iu; es5regex.test('S'); //-> false es6regex.test('S'); //-> true i 와 u 플래그가 동시에 쓰이면, W 는 더이상 w 의 반대값으로 동작하지 않는다.
- 19. HTML 문서 내에서의 패턴 HTML에서는 u 플래그가 항상 적용된 상태로 동작한다. <style> :invalid { background: red; } :valid {background: green; } </style> <input pattern="a.b" value="aXXb"> //-> red background <input pattern="a.b" value="a!b"> //-> green background
- 20. u 플래그 사용 가능 환경 지원 브라우저 - Microsoft Edge/Chakra (HTML 패턴 제외) - V8 (옵션으로 --harmony-unicode-regexps 전달) 예를 들어, 커맨드라인에서 테스트해보고 싶다면 아래와 같이 실행하면 된다. $ node --harmony_unicode_regexps 빌드 도구 - Babel 같은 빌드 도구에서 u 플래그 적용 여부에 대한 플래그가 있음 다른 라이브러리 사용 - regexpu (https://github.com/mathiasbynens/regexpu) - XRegExp (http://xregexp.com/)