JavaScript
정규 표현식

통사론

• let regex = / pattern / [ flags ]
• regex = new RegExp ( ' 패턴 ', [ 플래그 ])
• ismatch = regex.test ( ' text ')하자.
• 결과 = regex.exec ( ' text ')

매개 변수

비고

RegExp 객체 만들기

표준 창조

동적 변수에서 정규식을 만들 때만이 양식을 사용하는 것이 좋습니다.

표현식이 변경되거나 표현식이 사용자 생성 일 때 사용하십시오.

var re = new RegExp(".*");

플래그 사용 :

var re = new RegExp(".*", "gmi");

백 슬래시 : (정규 표현식이 문자열로 지정되어 있기 때문에 이스케이프해야 함)

var re = new RegExp("\\w*");

정적 초기화

정규식이 변경되지 않으며 런타임 전에 표현식이 무엇인지 알면 사용할 수 있습니다.

var re = /.*/;

플래그 사용 :

var re = /.*/gmi;

백 슬래시 : (정규 표현식이 리터럴에 지정되어 있기 때문에 이스케이프해서는 안됩니다)

var re = /\w*/;

RegExp 플래그

RegEx 동작을 변경하기 위해 지정할 수있는 몇 가지 플래그가 있습니다. 플래그는 /test/gi gi 에서 gi 를 지정하는 것과 같이 regex 리터럴 끝에 추가되거나 new RegExp('test', 'gi') 에서와 같이 RegExp 생성자에 대한 두 번째 인수로 지정 될 수 있습니다.

g - 글로벌. 첫 번째 이후에 중지하는 대신 모든 일치를 찾습니다.

i - 대소 문자를 무시하십시오. /[az]/i 는 /[a-zA-Z]/ .

m - Multiline. ^ 와 $ 는 각각 \n 과 \r 을 각각의 줄의 시작과 끝과 일치 시키며 단순히 전체 문자열의 시작과 끝 대신 구분 기호로 사용됩니다.

.exec ()와 일치

.exec() 사용하여 일치

RegExp.prototype.exec(string) 는 캡처 배열을 반환하고 일치하는 것이 없으면 null 반환합니다.

var re = /([0-9]+)[a-z]+/;
var match = re.exec("foo123bar");

match.index 는 일치 항목의 (0부터 시작하는) 위치 인 3입니다.

match[0] 은 전체 일치 문자열입니다.

match[1] 은 첫 번째 캡처 된 그룹에 해당하는 텍스트입니다. match[n] 은 n 번째로 포착 된 그룹의 값입니다.

.exec() 사용하여 루프 스루 매치

var re = /a/g;
var result;
while ((result = re.exec('barbatbaz')) !== null) {
    console.log("found '" + result[0] + "', next exec starts at index '" + re.lastIndex + "'");
}

예상 결과

'a'를 찾았 으면 다음 exec는 인덱스 '2'에서 시작합니다.
'a'를 찾았 으면 다음 exec는 인덱스 '5'에서 시작합니다.
'a'를 찾았습니다. 다음 exec는 인덱스 '8'에서 시작합니다.

.test ()를 사용하여 문자열에 패턴이 들어 있는지 확인하십시오.

var re = /[a-z]+/;
if (re.test("foo")) {
    console.log("Match exists.");
}

test 메서드는 정규 표현식이 문자열과 일치하는지 검색하기 위해 검색을 수행합니다. 정규식 [az]+ 는 하나 이상의 소문자를 검색합니다. 패턴이 문자열과 일치하기 때문에 일치하는 항목이 콘솔에 기록됩니다.

문자열과 함께 RegExp 사용

String 객체에는 정규 표현식을 인수로 허용하는 다음 메소드가 있습니다.

• "string".match(...
• "string".replace(...
• "string".split(...
• "string".search(...

RegExp와 일치

console.log("string".match(/[i-n]+/));
console.log("string".match(/(r)[i-n]+/));

예상 결과

배열 [ "in"]
배열 [ "rin", "r"]

RegExp로 바꾸기

console.log("string".replace(/[i-n]+/, "foo"));

예상 결과

strfoog

RegExp로 분할

console.log("stringstring".split(/[i-n]+/));

예상 결과

배열 [ "str", "gstr", "g"]

RegExp로 검색

.search() 는 일치가 발견 된 색인 또는 -1을 리턴합니다.

console.log("string".search(/[i-n]+/));
console.log("string".search(/[o-q]+/));

예상 결과

삼
-1

문자열 일치를 콜백 함수로 바꾸기

String#replace 는 함수를 두 번째 인수로 가질 수 있으므로 일부 논리를 기반으로 대체를 제공 할 수 있습니다.

"Some string Some".replace(/Some/g, (match, startIndex, wholeString) => {
  if(startIndex == 0){
    return 'Start';
  } else {
    return 'End';
  }
});
// will return Start string End

한 줄 템플릿 라이브러리

let data = {name: 'John', surname: 'Doe'}
"My name is {surname}, {name} {surname}".replace(/(?:{(.+?)})/g, x => data[x.slice(1,-1)]);

// "My name is Doe, John Doe"

정규식 그룹

JavaScript는 정규 표현식, 캡처 그룹 , 비 캡처 그룹 및 미리보기 의 몇 가지 유형의 그룹을 지원합니다. 현재, 모양 숨김 지원하지 않습니다.

포착

때로는 원하는 일치 항목이 컨텍스트에 의존합니다. 즉, 간단한 RegExp 가 관심있는 문자열 조각을 과도하게 찾을 것이므로 솔루션은 캡처 그룹 (pattern) 을 작성하는 것입니다. 캡처 된 데이터는 다음과 같이 참조 될 수 있습니다 ...

• 문자열 대체 "$n" 여기서 n 은 n 번째 캡처 그룹입니다 ( 1 부터 시작).
• 콜백 함수의 n 번째 인수
• 정규 표현식은 신고하지 않으면 g , 반환에 N + 1 번째 항목 str.match 어레이
• RegExp 플래그가 g 경우 str.match 는 캡처를 삭제하고 대신 re.exec 사용합니다.

모든 + 기호가 공백으로 대체되어야하는 문자열 이 있지만 문자 문자를 따라야 만 문자열 이 있다고 가정 해보십시오. 즉, 간단한 일치는 해당 문자를 포함하고 제거됩니다. 그것을 붙잡는 것은 일치 된 편지가 보존 될 수 있다는 것을 의미하는 해결책입니다.

let str = "aa+b+cc+1+2",
    re = /([a-z])\+/g;

// String replacement
str.replace(re, '$1 '); // "aa b cc 1+2"
// Function replacement
str.replace(re, (m, $1) => $1 + ' '); // "aa b cc 1+2"

비 캡처

양식 (?:pattern) 을 사용하여 일치하는 그룹의 내용을 저장하지 않는다는 점을 제외하고는 그룹을 캡처하는 것과 비슷한 방식으로 작동합니다.

인덱스를 이동하지 않고 다른 데이터를 캡처하는 경우 유용 할 수 있지만 OR과 같은 일부 고급 패턴 일치를 수행해야합니다.

let str = "aa+b+cc+1+2",
    re = /(?:\b|c)([a-z])\+/g;

str.replace(re, '$1 '); // "aa+b c 1+2"

미리보기

원하는 일치 항목이 일치하는 항목과 일치하는 항목이 아니라 일치하는 항목이 아닌 일치하는 항목이 아닌 일치하는 항목이 있으면 일치 여부를 테스트 할 수 있습니다. 긍정적 인 미리보기에는 양식 (?=pattern) , 음수 미리보기 (look-ahead 패턴이 일치하지 않는 경우에만 표현 일치가 발생하는)가 있습니다 (?!pattern)

let str = "aa+b+cc+1+2",
    re = /\+(?=[a-z])/g;

str.replace(re, ' '); // "aa b cc+1+2"

regex.exec ()를 괄호 정규식과 함께 사용하면 문자열 일치를 추출 할 수 있습니다.

때로는 단순히 문자열을 대체하거나 제거하기를 원하지 않습니다. 때로는 일치 항목을 추출하고 처리하려고합니다. 다음은 일치하는 방법을 보여주는 예입니다.

성냥은 무엇입니까? 호환되는 하위 문자열이 문자열의 전체 정규식에서 발견되면 exec 명령은 일치하는 문자열을 생성합니다. 일치 항목은 먼저 일치하는 전체 하위 문자열과 일치하는 모든 괄호로 구성된 배열입니다.

html 문자열을 상상해보십시오.

<html>
<head></head>
<body>
  <h1>Example</h1>
  <p>Look a this great link : <a href="https://stackoverflow.com">Stackoverflow</a> http://anotherlinkoutsideatag</p>
  Copyright <a href="https://stackoverflow.com">Stackoverflow</a>
</body>

a 태그 안에 모든 링크를 추출하여 가져 오려고합니다. 처음에는, 여기에 당신이 작성한 정규 표현식 :

var re = /<a[^>]*href="https?:\/\/.*"[^>]*>[^<]*<\/a>/g;

하지만 이제 각 링크의 href 와 anchor 를 원한다고 상상해보십시오. 너는 그것을 함께 원한다. 당신은 단순히 각 경기에 대한 새로운 정규식에 추가 할 수 있습니다 또는 당신은 괄호를 사용할 수 있습니다 :

var re = /<a[^>]*href="(https?:\/\/.*)"[^>]*>([^<]*)<\/a>/g; 
var str = '<html>\n    <head></head>\n    <body>\n        <h1>Example</h1>\n        <p>Look a this great link : <a href="https://stackoverflow.com">Stackoverflow</a> http://anotherlinkoutsideatag</p>\n\n        Copyright <a href="https://stackoverflow.com">Stackoverflow</a>\n    </body>\';\n';
var m;
var links = [];

while ((m = re.exec(str)) !== null) {
    if (m.index === re.lastIndex) {
        re.lastIndex++;
    }
    console.log(m[0]); // The all substring
    console.log(m[1]); // The href subpart
    console.log(m[2]); // The anchor subpart

    links.push({
      match : m[0],   // the entire match
      href : m[1],    // the first parenthesis => (https?:\/\/.*)
      anchor : m[2],  // the second one => ([^<]*)
    });
}

루프가 끝나면 anchor 와 href 가 포함 된 링크가 있으며이를 사용하여 예를 들어 마크 다운을 작성할 수 있습니다.

links.forEach(function(link) {
  console.log('[%s](%s)', link.anchor, link.href);
});

추가 정보 :

• 중첩 괄호