> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/val/builtin/regex/ex/quick-brown-fox.md).

# quick brown fox

[JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [object](/web/js/val/obj.md) ⟩ [regex](/web/js/val/builtin/regex.md) ⟩ [example](/web/js/val/builtin/regex/ex.md) ⟩ quick brown fox

{% hint style="success" %}
use [**matchAll()**](/web/js/val/prim/str/method/str.matchall.md) with [<mark style="color:yellow;">**`/d`**</mark>](/web/js/val/builtin/regex/flag/d.md), `/g`, `/i` flags.
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}

* replit ⟩ [quick brown fox](https://replit.com/@pegasusroe/regex-quick-brown-fox#index.js)

```javascript
// ⭐ custom pattern
// ------------------
// • match "quick brown" followed by "jumps", ignoring characters in between.
// • remember "brown" and "jumps" (groups)
// • flags: 
//   • /i - ignore case
//   • /g - global search
//   • /d - generate indices ⭐ 
//                    ╭──── G1 ─────╮   ╭─G2──╮
const regex = /quick\s(?<color>brown).+?(jumps)/dgi;
//                                   ╰─╯ any characters (?: as short as possible, lazy)

// index:   |01234567890123456789012345
//          |    ╭────── match ──────╮
const str = "The Quick Brown Fox Jumps Over The Lazy Dog";
// groups:             ╰─1─╯     ╰─2─╯

const matches = [...str.matchAll(regex)];    // iterator of matches -> array of matches
// 1. each match is an array ⭐️ 
// 2. match format: 
//                          ╭─────── match ───────╮  ╭─G1──╮  ╭─G2──╮
//    [match, ...groups] = ['Quick Brown Fox Jumps', 'Brown', 'Jumps']
//
// 3. additional properties:
// 
//    • index: 4                                       // index for match
//    • input: "The Quick Brown Fox ... Lazy Dog"      // original string
//    • groups: { color: 'Brown' }                     // named groups
//    • indices: [ [4, 25], [10, 15], [20, 25] ]       // indices for match/groups
//        • groups: { color: [10, 15] }                // indices for named groups

// ⭐️ pattern matching without generating indices
const regexWithoutGeneratingIndices = /quick\s(?<color>brown).+?(jumps)/gi;
const matches2 = [...str.matchAll(regexWithoutGeneratingIndices)];

;[
    // ⭐️ with indices
    matches[0],                          // first match
    // [
    //   'Quick Brown Fox Jumps',        // the "match" (substring)
    //   'Brown',                        // capture group #1
    //   'Jumps',                        // capture group #2
    //
    //   index: 4,                       // index for the "match"
    //   input: 'The Quick Brown ...',   // original string
    //   groups: { color: 'Brown' },     // named groups
    //
    //   indices: [                      // indices for match/groups ⭐️ 
    //     [ 4, 25 ],
    //     [ 10, 15 ],
    //     [ 20, 25 ],
    //     groups: { color: [ 10, 15 ] } // indices for named groups
    //   ]
    // ]
    
    matches[0][0],                 // the "match": 'Quick Brown Fox Jumps'
    matches[0].groups,             // named groups: { color: 'Brown' }
    matches[0].indices,            // indices for match/groups: [[4,25], [10,15], [20,25]]
    matches[0].indices.groups,     // indices for named groups: { color: [ 10, 15 ] }

    // ⭐️ without generating indices
    matches2[0],                          // first match
    // [
    //   'Quick Brown Fox Jumps',
    //   'Brown',
    //   'Jumps',
    //
    //   index: 4,
    //   input: 'The Quick Brown Fox Jumps Over The Lazy Dog',
    //   groups: { color: 'Brown' }
    // ]

].forEach(x => console.log(x));
```

{% endtab %}

{% tab title="👥 相關" %}

* [regex flag](/web/js/val/builtin/regex/flag.md)
* [str.matchAll()](/web/js/val/prim/str/method/str.matchall.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] Eloquent JS ⟩ [Regular Expressions](https://eloquentjavascript.net/09_regexp.html)
  {% endtab %}

{% tab title="📘 手冊" %}

* [str.matchAll(regex)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll)
* [str.match(regex)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match)
  {% endtab %}
  {% endtabs %}