[javascript] JavaScript 정규식에서 일치하는 그룹에 어떻게 액세스합니까?

이 답변에 사용 된 용어 :

• Match 는 다음과 같이 문자열에 대해 RegEx 패턴을 실행 한 결과를 나타냅니다 someString.match(regexPattern).
• 일치 패턴 은 입력 문자열에서 일치하는 모든 부분을 나타내며, 모두 일치 배열 안에 있습니다. 이들은 입력 문자열 내부의 모든 패턴 인스턴스입니다.
• 일치 그룹 은 RegEx 패턴에 정의 된 모든 그룹을 포착합니다. (괄호 안의 패턴과 같이 : /format_(.*?)/g여기서 (.*?)정합 기일 수있다.) 이러한 내에 상주 유사한 패턴 .

기술

받는 액세스 얻으려면 일치하는 그룹 의 각 일치 패턴 , 당신은 기능 또는 반복하는 비슷한 필요 일치 . 다른 많은 답변에서 볼 수 있듯이 여러 가지 방법으로이 작업을 수행 할 수 있습니다. 대부분의 다른 답변은 while 루프를 사용하여 일치하는 모든 패턴 을 반복 하지만, 우리는 그 접근 방식의 잠재적 위험을 모두 알고 있다고 생각합니다. new RegExp()주석에만 언급 된 패턴 자체 대신에 일치해야합니다 . 이것은 때문이다 .exec()방법은 유사 동작 생성 기능 – 일치하는 항목이있을 때마다 중지 ,하지만 유지 .lastIndex다음에 거기에서 계속 .exec()호출.

코드 예

아래는 모든 일치하는 패턴searchString 을 반환하는 함수의 예입니다. 여기서 각각 은 모든 포함 된 일치하는 그룹 과 함께 있습니다 . while 루프를 사용하는 대신 일반 루프를 사용하여 기능과 성능 을 모두 향상시키는 예제를 제공 했습니다.ArraymatchArrayArray.prototype.map()for

간결한 버전 (더 적은 코드, 더 많은 구문 설탕)

기본적으로 forEach더 빠른 for-loop 대신 -loop를 구현하므로 성능이 떨어 집니다.

// Concise ES6/ES2015 syntax
const searchString =
    (string, pattern) =>
        string
        .match(new RegExp(pattern.source, pattern.flags))
        .map(match =>
            new RegExp(pattern.source, pattern.flags)
            .exec(match));

// Or if you will, with ES5 syntax
function searchString(string, pattern) {
    return string
        .match(new RegExp(pattern.source, pattern.flags))
        .map(match =>
            new RegExp(pattern.source, pattern.flags)
            .exec(match));
}

let string = "something format_abc",
    pattern = /(?:^|\s)format_(.*?)(?:\s|$)/;

let result = searchString(string, pattern);
// [[" format_abc", "abc"], null]
// The trailing `null` disappears if you add the `global` flag

퍼포먼스 버전 (더 많은 코드, 적은 구문 설탕)

// Performant ES6/ES2015 syntax
const searchString = (string, pattern) => {
    let result = [];

    const matches = string.match(new RegExp(pattern.source, pattern.flags));

    for (let i = 0; i < matches.length; i++) {
        result.push(new RegExp(pattern.source, pattern.flags).exec(matches[i]));
    }

    return result;
};

// Same thing, but with ES5 syntax
function searchString(string, pattern) {
    var result = [];

    var matches = string.match(new RegExp(pattern.source, pattern.flags));

    for (var i = 0; i < matches.length; i++) {
        result.push(new RegExp(pattern.source, pattern.flags).exec(matches[i]));
    }

    return result;
}

let string = "something format_abc",
    pattern = /(?:^|\s)format_(.*?)(?:\s|$)/;

let result = searchString(string, pattern);
// [[" format_abc", "abc"], null]
// The trailing `null` disappears if you add the `global` flag

나는이 대안들을 다른 답변들에서 이전에 언급 한 대안들과 비교하지는 않았지만,이 접근법이 다른 방법들보다 성능이 낮고 고장이 적다는 것은 의심 스럽다.

답변

var myString = "key1:value1, key2-value2!!@key3=value3";
var matches = myString.matchAll(/(\w+)[:=-](\w+)/g);
console.log([...matches]); // All match with capturing group values

let matchData = "key1:value1, key2-value2!!@key3=value3".matchAll(/(\w+)[:=-](\w+)/g)
var matches = [...matchData]; // Note matchAll result is not re-iterable

console.log(Array.from(matches, m => m[0])); // All match (Group 0) values
// => [ "key1:value1", "key2-value2", "key3=value3" ]
console.log(Array.from(matches, m => m[1])); // All match (Group 1) values
// => [ "key1", "key2", "key3" ]