Bagaimana Anda mengakses grup yang cocok dalam ekspresi reguler JavaScript?

Saya ingin mencocokkan sebagian string menggunakan ekspresi reguler dan kemudian mengakses substring yang diurung:

var myString = "something format_abc"; // I want "abc"

var arr = /(?:^|\s)format_(.*?)(?:\s|$)/.exec(myString);

console.log(arr);     // Prints: [" format_abc", "abc"] .. so far so good.
console.log(arr[1]);  // Prints: undefined  (???)
console.log(arr[0]);  // Prints: format_undefined (!!!)

Apa yang saya lakukan salah?

Saya telah menemukan bahwa tidak ada yang salah dengan kode ekspresi reguler di atas: string sebenarnya yang saya uji adalah:

"date format_%A"

Melaporkan bahwa "% A" tidak terdefinisi tampaknya merupakan perilaku yang sangat aneh, tetapi tidak terkait langsung dengan pertanyaan ini, jadi saya telah membuka yang baru, Mengapa substring yang cocok mengembalikan "tidak terdefinisi" dalam JavaScript? .

Masalahnya adalah yang console.logmengambil parameternya seperti printfpernyataan, dan karena string yang saya logging ( "%A") memiliki nilai khusus, ia mencoba mencari nilai parameter berikutnya.

Anda dapat mengakses menangkap grup seperti ini:

var myString = "something format_abc";
var myRegexp = /(?:^|\s)format_(.*?)(?:\s|$)/g;
var match = myRegexp.exec(myString);
console.log(match[1]); // abc

Dan jika ada beberapa pertandingan, Anda dapat mengulanginya:

var myString = "something format_abc";
var myRegexp = /(?:^|\s)format_(.*?)(?:\s|$)/g;
match = myRegexp.exec(myString);
while (match != null) {
  // matched text: match[0]
  // match start: match.index
  // capturing group n: match[n]
  console.log(match[0])
  match = myRegexp.exec(myString);
}

Edit: 2019-09-10

Seperti yang Anda lihat cara untuk mengulang beberapa pertandingan tidak terlalu intuitif. Ini mengarah pada usulan String.prototype.matchAllmetode. Metode baru ini diharapkan dikirimkan dalam spesifikasi ECMAScript 2020 . Ini memberi kami API bersih dan menyelesaikan beberapa masalah. Sudah mulai mendarat di browser utama dan mesin JS sebagai Chrome 73+ / Node 12+ dan Firefox 67+.

Metode mengembalikan iterator dan digunakan sebagai berikut:

const string = "something format_abc";
const regexp = /(?:^|\s)format_(.*?)(?:\s|$)/g;
const matches = string.matchAll(regexp);
    
for (const match of matches) {
  console.log(match);
  console.log(match.index)
}

Karena mengembalikan iterator, kita dapat mengatakan itu malas, ini berguna ketika menangani kelompok penangkapan yang sangat banyak, atau string yang sangat besar. Tetapi jika Anda perlu, hasilnya dapat dengan mudah diubah menjadi Array dengan menggunakan sintaks spread atau Array.frommetode:

function getFirstGroup(regexp, str) {
  const array = [...str.matchAll(regexp)];
  return array.map(m => m[1]);
}

// or:
function getFirstGroup(regexp, str) {
  return Array.from(str.matchAll(regexp), m => m[1]);
}

Sementara itu, sementara proposal ini mendapat dukungan yang lebih luas, Anda dapat menggunakan paket shim resmi .

Juga, cara kerja internal metode ini sederhana. Implementasi yang setara menggunakan fungsi generator adalah sebagai berikut:

function* matchAll(str, regexp) {
  const flags = regexp.global ? regexp.flags : regexp.flags + "g";
  const re = new RegExp(regexp, flags);
  let match;
  while (match = re.exec(str)) {
    yield match;
  }
}

Salinan regexp asli dibuat; ini untuk menghindari efek samping karena mutasi lastIndexproperti ketika melewati pertandingan multple.

Juga, kita perlu memastikan regexp memiliki flag global untuk menghindari infinite loop.

Saya juga senang melihat bahwa bahkan pertanyaan StackOverflow ini dirujuk dalam diskusi proposal .

Berikut adalah metode yang dapat Anda gunakan untuk mendapatkan grup penangkap ke- n untuk setiap pertandingan:

function getMatches(string, regex, index) {
  index || (index = 1); // default to the first capturing group
  var matches = [];
  var match;
  while (match = regex.exec(string)) {
    matches.push(match[index]);
  }
  return matches;
}


// Example :
var myString = 'something format_abc something format_def something format_ghi';
var myRegEx = /(?:^|\s)format_(.*?)(?:\s|$)/g;

// Get an array containing the first capturing group for every match
var matches = getMatches(myString, myRegEx, 1);

// Log results
document.write(matches.length + ' matches found: ' + JSON.stringify(matches))
console.log(matches);

var myString = "something format_abc";
var arr = myString.match(/\bformat_(.*?)\b/);
console.log(arr[0] + " " + arr[1]);

Ini \bbukan hal yang persis sama. (Berhasil --format_foo/, tetapi tidak berhasil format_a_b) Tapi saya ingin menunjukkan alternatif untuk ekspresi Anda, yang tidak masalah Tentu saja, matchpanggilan itu yang penting.

Sehubungan dengan contoh tanda kurung multi-pertandingan di atas, saya mencari jawaban di sini setelah tidak mendapatkan apa yang saya inginkan dari:

var matches = mystring.match(/(?:neededToMatchButNotWantedInResult)(matchWanted)/igm);

Setelah melihat panggilan fungsi yang agak berbelit-belit dengan while dan .push () di atas, saya sadar bahwa masalahnya dapat diselesaikan dengan sangat elegan dengan mystring.replace () sebagai gantinya (penggantian BUKAN intinya, dan bahkan tidak dilakukan , opsi panggilan fungsi rekursif BERSIH, built-in untuk parameter kedua adalah!):

var yourstring = 'something format_abc something format_def something format_ghi';

var matches = [];
yourstring.replace(/format_([^\s]+)/igm, function(m, p1){ matches.push(p1); } );

Setelah ini, saya tidak berpikir saya akan menggunakan .match () untuk hampir tidak ada lagi.

Terakhir, saya menemukan satu baris kode yang berfungsi baik untuk saya (JS ES6):

let reg = /#([\S]+)/igm; // Get hashtags.
let string = 'mi alegría es total! ✌🙌\n#fiestasdefindeaño #PadreHijo #buenosmomentos #france #paris';

let matches = (string.match(reg) || []).map(e => e.replace(reg, '$1'));
console.log(matches);

Ini akan mengembalikan:

['fiestasdefindeaño', 'PadreHijo', 'buenosmomentos', 'france', 'paris']

Terminologi yang digunakan dalam jawaban ini:

• Pertandingan menunjukkan hasil menjalankan pola regex Anda terhadap string Anda seperti: someString.match(regexPattern).
• Pola yang cocok menunjukkan semua bagian yang cocok dari string input, yang semuanya berada di dalam array yang cocok . Ini semua adalah contoh dari pola Anda di dalam string input.
• Grup yang cocok menunjukkan semua grup untuk ditangkap, didefinisikan dalam pola RegEx. (Pola di dalam tanda kurung, seperti:/format_(.*?)/g mana (.*?)akan menjadi kelompok yang cocok.) Ini berada dalam pola yang cocok .

Deskripsi

Untuk mendapatkan akses ke grup yang cocok , di masing-masing pola yang cocok , Anda memerlukan fungsi atau sesuatu yang mirip dengan iterate selama pertandingan . Ada beberapa cara Anda bisa melakukan ini, seperti yang ditunjukkan oleh banyak jawaban lainnya. Sebagian besar jawaban lain menggunakan perulangan sementara untuk mengulangi semua pola yang cocok , tapi saya pikir kita semua tahu potensi bahaya dengan pendekatan itu. Penting untuk mencocokkan dengan new RegExp()bukan hanya pola itu sendiri, yang hanya disebutkan dalam komentar. Ini karena .exec()metode ini berperilaku mirip dengan fungsi generator - berhenti setiap kali ada kecocokan , tetapi tetap .lastIndexmelanjutkan dari .exec()panggilan berikutnya .

Contoh kode

Di bawah ini adalah contoh dari fungsi searchStringyang mengembalikan suatu Arraydari semua pola yang cocok , di mana masing match- masing adalah Arraydengan semua kelompok yang cocok yang berisi . Alih-alih menggunakan loop sementara, saya telah memberikan contoh menggunakan kedua Array.prototype.map()fungsi serta cara yang lebih performant - menggunakan for-loop polos .

Versi ringkas (lebih sedikit kode, lebih banyak gula sintaksis)

Ini kurang berkinerja karena mereka pada dasarnya menerapkan forEach-loop daripada yang lebih cepat for-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

Versi performan (lebih banyak kode, lebih sedikit gula sintaksis)

// 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

Saya belum membandingkan alternatif ini dengan yang sebelumnya disebutkan dalam jawaban lain, tetapi saya ragu pendekatan ini kurang berkinerja dan kurang aman-gagal daripada yang lain.

String#matchAll(lihat Tahap 3 Draft / 7 Desember 2018 usulan ), menyederhanakan acccess untuk semua kelompok dalam objek pertandingan (diingat bahwa Kelompok 0 adalah seluruh pertandingan, sementara kelompok lanjut sesuai dengan kelompok menangkap dalam pola):

Dengan matchAlltersedia, Anda dapat menghindari whileloop dan execdengan /g... Sebaliknya, dengan menggunakan matchAll, Anda mendapatkan kembali iterator yang dapat Anda gunakan dengan lebih mudah for...of, penyebaran array , atau Array.from()konstruksi

Metode ini menghasilkan output yang mirip dengan Regex.Matchesdi C #, re.finditerdengan Python,preg_match_all dalam PHP.

Lihat demo JS (diuji di Google Chrome 73.0.3683.67 (versi resmi), beta (64-bit)):

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

The console.log([...matches])show

Anda juga bisa mendapatkan nilai kecocokan atau nilai grup tertentu menggunakan

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" ]

CATATAN : Lihat detail kompatibilitas browser .

Sintaks Anda mungkin bukan yang terbaik untuk disimpan. FF / Gecko mendefinisikan RegExp sebagai perpanjangan dari Function.
(FF2 pergi sejauh typeof(/pattern/) == 'function')

Tampaknya ini khusus untuk FF - IE, Opera, dan Chrome semua membuang pengecualian untuk itu.

Sebaliknya, gunakan salah satu metode yang sebelumnya disebutkan oleh orang lain: RegExp#execatau String#match.
Mereka menawarkan hasil yang sama:

var regex = /(?:^|\s)format_(.*?)(?:\s|$)/;
var input = "something format_abc";

regex(input);        //=> [" format_abc", "abc"]
regex.exec(input);   //=> [" format_abc", "abc"]
input.match(regex);  //=> [" format_abc", "abc"]

Tidak perlu memanggil execmetode! Anda dapat menggunakan metode "cocokkan" langsung pada string. Hanya saja, jangan lupa tanda kurung.

var str = "This is cool";
var matches = str.match(/(This is)( cool)$/);
console.log( JSON.stringify(matches) ); // will print ["This is cool","This is"," cool"] or something like that...

Posisi 0 memiliki string dengan semua hasil. Posisi 1 memiliki kecocokan pertama diwakili oleh tanda kurung, dan posisi 2 memiliki kecocokan kedua diisolasi dalam tanda kurung Anda. Kurung bersarang itu rumit, jadi waspadalah!

Satu liner yang praktis hanya jika Anda memiliki sepasang tanda kurung:

while ( ( match = myRegex.exec( myStr ) ) && matches.push( match[1] ) ) {};

Menggunakan kode Anda:

console.log(arr[1]);  // prints: abc
console.log(arr[0]);  // prints:  format_abc

Sunting: Safari 3, jika itu penting.

Dengan es2018 Anda sekarang dapat String.match()dengan grup yang diberi nama, membuat regex Anda lebih eksplisit dari apa yang ia coba lakukan.

const url =
  '/programming/432493/how-do-you-access-the-matched-groups-in-a-javascript-regular-expression?some=parameter';
const regex = /(?<protocol>https?):\/\/(?<hostname>[\w-\.]*)\/(?<pathname>[\w-\./]+)\??(?<querystring>.*?)?$/;
const { groups: segments } = url.match(regex);
console.log(segments);

dan Anda akan mendapatkan sesuatu seperti

{protokol: "https", hostname: "stackoverflow.com", pathname: "pertanyaan / 432493 / bagaimana-Anda-mengakses-grup-yang-dicocokkan-dalam-javascript-ekspresi-reguler", querystring: " some = parameter "}

Kode Anda berfungsi untuk saya (FF3 pada Mac) bahkan jika saya setuju dengan PhiLo bahwa regex mungkin harus:

/\bformat_(.*?)\b/

(Tapi, tentu saja, aku tidak yakin karena aku tidak tahu konteks dari regex.)

/*Regex function for extracting object from "window.location.search" string.
 */

var search = "?a=3&b=4&c=7"; // Example search string

var getSearchObj = function (searchString) {

    var match, key, value, obj = {};
    var pattern = /(\w+)=(\w+)/g;
    var search = searchString.substr(1); // Remove '?'

    while (match = pattern.exec(search)) {
        obj[match[0].split('=')[0]] = match[0].split('=')[1];
    }

    return obj;

};

console.log(getSearchObj(search));

Anda tidak benar-benar membutuhkan loop eksplisit untuk mem-parsing beberapa pertandingan - berikan fungsi pengganti sebagai argumen kedua seperti yang dijelaskan dalam String.prototype.replace(regex, func)::

var str = "Our chief weapon is {1}, {0} and {2}!"; 
var params= ['surprise', 'fear', 'ruthless efficiency'];
var patt = /{([^}]+)}/g;

str=str.replace(patt, function(m0, m1, position){return params[parseInt(m1)];});

document.write(str);

The m0Argumen merupakan substring cocok penuh {0}, {1}, dll m1mewakili kelompok pencocokan pertama, yaitu bagian yang ditutupi dalam kurung dalam regex yang 0untuk pertandingan pertama. Dan positionadalah indeks awal dalam string tempat grup yang cocok ditemukan - tidak digunakan dalam kasus ini.

Kami dapat mengakses grup yang cocok dalam ekspresi reguler dengan menggunakan garis miring terbalik diikuti dengan jumlah grup yang cocok:

/([a-z])\1/

Dalam kode \ 1 diwakili cocok dengan grup pertama ([az])

Solusi satu baris:

const matches = (text,regex) => [...text.matchAll(regex)].map(([match])=>match)

Jadi Anda bisa menggunakan cara ini (harus menggunakan / g):

matches("something format_abc", /(?:^|\s)format_(.*?)(?:\s|$)/g)

hasil:

[" format_abc"]

Dapatkan semua kejadian kelompok

let m=[], s = "something format_abc  format_def  format_ghi";

s.replace(/(?:^|\s)format_(.*?)(?:\s|$)/g, (x,y)=> m.push(y));

console.log(m);

Saya Anda seperti saya dan berharap regex akan mengembalikan Obyek seperti ini:

{
    match: '...',
    matchAtIndex: 0,
    capturedGroups: [ '...', '...' ]
}

lalu potong fungsi dari bawah

/**
 * @param {string | number} input
 *          The input string to match
 * @param {regex | string}  expression
 *          Regular expression 
 * @param {string} flags
 *          Optional Flags
 * 
 * @returns {array}
 * [{
    match: '...',
    matchAtIndex: 0,
    capturedGroups: [ '...', '...' ]
  }]     
 */
function regexMatch(input, expression, flags = "g") {
  let regex = expression instanceof RegExp ? expression : new RegExp(expression, flags)
  let matches = input.matchAll(regex)
  matches = [...matches]
  return matches.map(item => {
    return {
      match: item[0],
      matchAtIndex: item.index,
      capturedGroups: item.length > 1 ? item.slice(1) : undefined
    }
  })
}

let input = "key1:value1, key2:value2 "
let regex = /(\w+):(\w+)/g

let matches = regexMatch(input, regex)

console.log(matches)

HANYA MENGGUNAKAN RegExp. $ 1 ... $ n grup mis:

1.Untuk mencocokkan RegExp grup 1 $ 1

2. Untuk mencocokkan RegExp grup 2. $ 2

jika Anda menggunakan 3 grup di regex likey (perhatikan penggunaan setelah string.match (regex))

RegExp. $ 1 RegExp. $ 2 RegExp. $ 3

 var str = "The rain in ${india} stays safe"; 
  var res = str.match(/\${(.*?)\}/ig);
  //i used only one group in above example so RegExp.$1
console.log(RegExp.$1)

//easiest way is use RegExp.$1 1st group in regex and 2nd grounp like
 //RegExp.$2 if exist use after match

var regex=/\${(.*?)\}/ig;
var str = "The rain in ${SPAIN} stays ${mainly} in the plain"; 
  var res = str.match(regex);
for (const match of res) {
  var res = match.match(regex);
  console.log(match);
  console.log(RegExp.$1)
 
}