ES9의 새로운 특성에 대한 정규 표현식 RegExp 상세 정보

소개

정규 표현식은 우리가 데이터를 일치시킬 때 자주 사용하는 도구이다. 정규 표현식의 문법은 복잡하지 않지만 여러 가지 문법을 조합하면 손댈 수 없는 느낌을 줄 수 있다.
그래서 정규 표현식은 프로그래머의 악몽이 되었다.오늘은 ES9에서 정규 표현식을 어떻게 하는지 살펴보겠습니다.

Numbered capture groups

정규 표현식은 그룹을 나눌 수 있다는 것을 알고 있습니다. 그룹은 괄호로 표시되며, 그룹의 값을 얻으려면capturegroups라고 합니다.
일반적으로, 우리는 번호를 통해capturegroups에 접근하는데, 이것을 Numberedcapturegroups라고 부른다.
예:

const RE_DATE = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31

위의 정규 표현식은 연월일과 일치하고exec 방법을 통해 match의 수조를 되돌려줍니다.이 그룹은 일치하는 그룹 정보를 저장합니다.
우리는 세 개의 괄호가 있기 때문에 세 개의 그룹과 일치할 수 있다.그리고 1, 2, 3을 통해 특정한 그룹에 접근합니다.
위의 matchObj 출력을 살펴보겠습니다.

[
 '1999-12-31',
 '1999',
 '12',
 '31',
 index: 0,
 input: '1999-12-31',
 groups: undefined
]

matchObj는 하나의 그룹이고 index 0은 일치하는 문자열을 저장합니다.여기에서 우리는 matchObj를 보았는데 또 하나의 그룹스는undefined이고 이 그룹스는 그룹스라고 명명되었다.

Named capture groups

numbered capture groups는 시퀀스 번호를 통해 일치하는 데이터에 접근합니다.하지만 일치하는 그룹은 이름이 없습니다.
어떻게 하면 이 그룹들에게 이름을 지을 수 있는지 봅시다.

const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31

matchObj의 내용을 보려면 다음과 같이 하십시오.

[
 '1999-12-31',
 '1999',
 '12',
 '31',
 index: 0,
 input: '1999-12-31',
 groups: [Object: null prototype] { year: '1999', month: '12', day: '31' }
]

이번에 그룹 정보가 많아진 것을 볼 수 있다.
우리가 이전에 일치했던 그룹 정보와 일치하려면,numbered groups의\k 또는named groups의\k를 사용할 수 있습니다.
예를 들어 보겠습니다.

const RE_TWICE = /^(?<word>[a-z]+)!\k<word>$/;
RE_TWICE.test('abc!abc'); // true
RE_TWICE.test('abc!ab'); // false

const RE_TWICE = /^(?<word>[a-z]+)!\1$/;
RE_TWICE.test('abc!abc'); // true
RE_TWICE.test('abc!ab'); // false

두 가지 문법은 모두 사용할 수 있다.
Named capture groups는 Replace와 함께 사용할 수도 있습니다.
그룹name이 있으면 Replace에서 그룹name을 사용하여 참조할 수 있습니다.

const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;
console.log('1999-12-31'.replace(RE_DATE,
  '$<month>/$<day>/$<year>'));
  // 12/31/1999

replace의 두 번째 매개 변수는 함수일 수 있습니다. 함수의 매개 변수는 우리 그룹에서 나온 내용입니다.

const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;
console.log('1999-12-31'.replace(
  RE_DATE,
  (g0,y,m,d,offset,input, {year, month, day}) => // (A)
    month+'/'+day+'/'+year));
  // 12/31/1999

위의 예에서 g0 = 1999-12-31은 일치하는 하위 문자열을 나타낸다.y, m, d가 일치하는 것은numbered groups 1, 2, 3입니다.
input는 전체 입력입니다.{year,month,day} 일치하는 것은named 그룹입니다.

RegExp에서 Unicode 속성의 이스케이프

유니코드 표준에서는 모든 문자에 속성이 있습니다. 간단하게 말하면 속성은 이 문자를 설명하는 데 사용됩니다.
예를 들면 General_Category는 문자의 분류를 나타냅니다. x: General_Category = Lowercase_Letter
White_스페이스는 공백,tabs 및 줄 바꿈:\t:White_Space = True
Age는 해당 문자가 유니코드에 언제 추가되는지 등을 나타냅니다.
이 속성들은 대응하는 줄임말도 있습니다: Lowercase_Letter = Ll , Currency_Symbol = Sc 등등.
예를 들면, 예를 들면, 우리는 빈칸과 일치하고 싶다.전통적인 방법은 다음과 같다.

> /^\s+$/.test('\t 
\r')
true

앞쪽은 정규 표현식입니다. 그리고 문자열을 일치시키기 위해test 방법을 사용하면true를 얻을 수 있습니다.
방금 유니코드의 속성을 말했습니다. 우리도 속성으로 일치할 수 있습니다.

> /^\p{White_Space}+$/u.test('\t 
\r')
true

속성 일치는 \p, 뒤에 있는 것은 속성 값입니다.
유니코드 속성 전의를 사용하기 위해 정규 표현식 뒤에 u를 붙여야 합니다.

lookaround assertion

lookaroundassertion은 환시 단언으로 번역될 수 있으며, 정규 표현식의 구조로 일치하는 대상의 전후 환경이 어떤지 판단하는 데 사용된다.
lookaround assertion 두 가지가 있는데 하나는 Lookahead이고 하나는 Lookbehind입니다.
Lookahead의 사용을 살펴보겠습니다.

const RE_AS_BS = /aa(?=bb)/;
const match1 = RE_AS_BS.exec('aabb');
console.log(match1[0]); // 'aa'

const match2 = RE_AS_BS.exec('aab');
console.log(match2); // null

lookahead는 바로 앞을 보는 것입니다. 위에서 우리가 사용하는 것은 (?=bb) 앞으로 bb와 일치하는 것입니다.
정규 표현식이 abb와 일치하지만 match에는 bb가 포함되지 않습니다.
결과는 첫 번째가 맞았고, 두 번째가 일치하지 않았다.
사용?= 외에 우리는 사용?!을 사용하여 같지 않음을 표시할 수 있다.

> const RE_AS_NO_BS = /aa(?!bb)/;
> RE_AS_NO_BS.test('aabb')
false
> RE_AS_NO_BS.test('aab')
true
> RE_AS_NO_BS.test('aac')
true

Lookbehind의 사용을 다시 한 번 살펴보겠습니다.
Lookbehind와 Lookahead가 조회하는 방향은 방금 반대입니다.
뒤로 매칭은 ?<= 을 사용하여 나타냅니다. 예를 들어 보겠습니다.

const RE_DOLLAR_PREFIX = /(?<=\$)foo/g;
'$foo %foo foo'.replace(RE_DOLLAR_PREFIX, 'bar');
  // '$bar %foo foo'

위의 예에서, 우리는 맨 앞의 $와 일치하고, bar를 사용하여foo를 교체했습니다.
마찬가지로 우리도 ?<! 를 사용하여 서로 다른 상황을 나타낼 수 있다.

const RE_NO_DOLLAR_PREFIX = /(?<!\$)foo/g;
'$foo %foo foo'.replace(RE_NO_DOLLAR_PREFIX, 'bar');
  // '$foo %bar bar'

dotAll flag

정상적인 상황에서dot.이 문자는 행의 끝 문자를 나타낼 수 없습니다.

> /^.$/.test('
')
false

dotAll은dot입니다.뒤에 도입된 s를 일치시킵니다. 줄의 끝 문자를 일치시킵니다.

> /^.$/s.test('
')
true

ES에서 다음 문자는 행의 끝 문자로 표시됩니다.

U+000A LINE FEED (LF) ()

U+000D CARRIAGE RETURN (CR) (\r)

U+2028 LINE SEPARATOR

U+2029 PARAGRAPH SEPARATOR

총결산

이 ES9의 새로운 특성에 대한 정규 표현식 Regexp에 대한 상세한 설명은 여기 있습니다. 더 많은 ES9 정규 표현식 Regexp 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!