🔰greedy vs. lazy

🚧 under construction

JS ⟩ value ⟩ object ⟩ regex ⟩ pattern ⟩ repeat

quantifiers are

• normally greedy (match as much as possible),

• when followed by ? they become lazy (match as little as possible).

     regex       matches
------------------------------------------------------
+    b\w+       be bee beer beers   (greedy)
                ╰╯ ╰─╯ ╰──╯ ╰───╯
+?   b\w+?      be bee beer beers   (lazy)
                ╰╯ ╰╯  ╰╯   ╰╯

🈯 synonyms： "quantifier"

⭐️ 重點

When using a repetition operator, consider the lazy variant first.

💈範例

• replit ⟩ greedy vs. lazy

// greedy: [^]*               or
//                            ↓    ╭──╮ <--- greedy (as many as possible)
const commentPattern = /\/\/.*|\/\*[^]*\*\//g;
//                      ╰─1──╯ ╰─────2─────╯
// 1. '//' followed by any non-newline characters.
// 2. '/*' followed by any characters and '*/'.

// lazy: [^]*?
const commentPattern2 = /\/\/.*|\/\*[^]*?\*\//g;
//                                  ╰───╯ <--- lazy (as few as possible)

// remove comments from code
function stripComments(code, lazy = false) {
    let pattern = commentPattern;
    if (lazy) pattern = commentPattern2;
    return code.replace(pattern, "");
}

stripComments("1 + /* 2 */ 3"),                // '1 +  3'
stripComments("x = 10;   // ten!"),            // 'x = 10;   '
stripComments("1 /* a */ + /* b */ 1"),        // '1  1'        // greedy
stripComments("1 /* a */ + /* b */ 1", true),  // '1  +  1'     // lazy

📗 參考

• Eloquent JavaScript ⟩ Regular Expressions ⟩ Greedy

• Regular Expression Quick Reference