util,console: colorize regexp groups, character classes, etc

This adds a parser to parse the regular expression and to highlight
different parts of a regular expression in case colors are active.

It is a one time pass algorithm and should therefore not cause too
much overhead during parsing.

As side effect, it is now possible to create individual styles to
colorize inspected values values as a user likes. This might for
example be expanded to numbers with numeric separators, highlighting
the separators or decimal points different.

It would in theory also be possible to return a changed string.
That is however not the intention for this API as it is only
triggered in case colors are active.

Author: BridgeAR

doc/api/util.md

@@ -845,6 +845,11 @@ stream.write('With ES6');
 <!-- YAML
 added: v0.3.0
 changes:
+  - version:
+    - REPLACEME
+    pr-url: https://github.com/nodejs/node/pull/XXXXX
+    description: The util.inspect.styles.regexp style is now a method that is
+                 invoked for coloring the stringified regular expression.
   - version:
     - v17.3.0
     - v16.14.0
@@ -1295,7 +1300,12 @@ The default styles and associated colors are:
 * `name`: (no styling)
 * `null`: `bold`
 * `number`: `yellow`
-* `regexp`: `red`
+* `regexp`: A method that colors character classes, groups, assertions, and
+  other parts for improved readability. To customize the coloring, change the
+  `colors` property. It is set to
+  `['red', 'green', 'yellow', 'cyan', 'magenta']` by default and may be
+  adjusted as needed. The array is repetitively iterated through depending on
+  the "depth".
 * `special`: `cyan` (e.g., `Proxies`)
 * `string`: `green`
 * `symbol`: `green`
@@ -1307,6 +1317,17 @@ terminals. To verify color support use [`tty.hasColors()`][].
 Predefined control codes are listed below (grouped as "Modifiers", "Foreground
 colors", and "Background colors").
 
+#### Complex custom coloring
+
+It is possible to define a method as style. It receives the stringified value
+of the input. It is invoked in case coloring is active and the type is
+inspected.
+
+Example: `util.inspect.styles.regexp(value)`
+
+* `value` {string} The string representation of the input type.
+* Returns: {string} The adjusted representation of `object`.
+
 #### Modifiers
 
 Modifier support varies throughout different terminals. They will mostly be

lib/internal/util/inspect.js

@@ -497,7 +497,6 @@ defineColorAlias('inverse', 'swapColors');
 defineColorAlias('inverse', 'swapcolors');
 defineColorAlias('doubleunderline', 'doubleUnderline');
 
-// TODO(BridgeAR): Add function style support for more complex styles.
 // Don't use 'blue' not visible on cmd.exe
 inspect.styles = ObjectAssign({ __proto__: null }, {
   special: 'cyan',
@@ -510,11 +509,264 @@ inspect.styles = ObjectAssign({ __proto__: null }, {
   symbol: 'green',
   date: 'magenta',
   // "name": intentionally not styling
-  // TODO(BridgeAR): Highlight regular expressions properly.
-  regexp: 'red',
+  regexp: highlightRegExp,
   module: 'underline',
 });
 
+// Define the palette for RegExp group depth highlighting. Can be changed by users.
+inspect.styles.regexp.colors = ['green', 'red', 'yellow', 'cyan', 'magenta'];
+
+const highlightRegExpColors = inspect.styles.regexp.colors.slice();
+
+function findSequence(regexpString, i, start, end, write) {
+  // TODO(BridgeAR): Improve the output by using a different depth for the content.
+  let seq = start;
+  i++;
+  while (i < regexpString.length && regexpString[i] !== end) {
+    seq += regexpString[i++];
+  }
+  if (i < regexpString.length) {
+    seq += end;
+    i++;
+  }
+  return seq;
+}
+
+/**
+ * Tokenize and colorize a JavaScript RegExp pattern per ECMAScript grammar.
+ * This is a tolerant single-pass highlighter, not a validator.
+ * It supports: groups (named/unnamed, lookaround), assertions, alternation,
+ * quantifiers, escapes (incl. Unicode properties), character classes and
+ * backreferences. Character class set-ops in /v are highlighted heuristically.
+ * @param {string} regexpString
+ * @returns {string}
+ */
+function highlightRegExp(regexpString) {
+  let out = '';
+  let i = 0;
+  let depth = 0;
+  let inClass = false;
+
+  // TODO(BridgeAR): Add group type tracking. That allows to increase the depth
+  // in case the same type is next to each other.
+  // let groupType = 0;
+
+  // Verify palette and update cache if user changed colors
+  const paletteNames = highlightRegExp.colors?.length > 0 ?
+    highlightRegExp.colors :
+    highlightRegExpColors;
+
+  const palette = paletteNames.reduce((acc, name) => {
+    const color = inspect.colors[name];
+    if (color) acc.push([`\u001b[${color[0]}m`, `\u001b[${color[1]}m`]);
+    return acc;
+  }, []);
+
+  const write = (str) => {
+    const idx = depth % palette.length;
+    const color = palette[idx];
+    out += color[0] + str + color[1];
+    return idx;
+  };
+
+  // Opening '/'. Input always starts with '/'
+  write('/');
+  depth++;
+  i = 1;
+
+  // Parse pattern until next unescaped '/'
+  while (i < regexpString.length) {
+    const ch = regexpString[i];
+
+    if (inClass) {
+      if (ch === '\\') {
+        let seq = '\\';
+        i++;
+        if (i < regexpString.length) {
+          seq += regexpString[i++];
+          if (i < regexpString.length && seq[1] === 'u' && regexpString[i] === '{') {
+            const str = findSequence(regexpString, i, '{', '}');
+            seq += str;
+            i += str.length;
+          } else if (seq[1] === 'x') {
+            seq += regexpString.slice(i, i + 2);
+            i += 2;
+          }
+        }
+        write(seq);
+      } else if (ch === ']') {
+        depth--;
+        write(']');
+        i++;
+        inClass = false;
+      } else if (ch === '-' && regexpString[i - 1] !== '[' &&
+                 i + 1 < regexpString.length && regexpString[i + 1] !== ']') {
+        depth++;
+        write('-');
+        depth--;
+        i++;
+      } else {
+        write(ch);
+        i++;
+      }
+    } else if (ch === '[') {
+      // Enter class
+      write('[');
+      depth++;
+      i++;
+      inClass = true;
+    } else if (ch === '(') {
+      write('(');
+      depth++;
+      i++;
+      if (i < regexpString.length && regexpString[i] === '?') {
+        // Assertions and named groups
+        i++;
+        const a = i < regexpString.length ? regexpString[i] : '';
+        if (a === ':' || a === '=' || a === '!') {
+          depth--;
+          write('?');
+          write(a);
+          depth++;
+          i++;
+        } else {
+          const b = i + 1 < regexpString.length ? regexpString[i + 1] : '';
+          if (a === '<' && (b === '=' || b === '!')) {
+            depth--;
+            write('?<');
+            depth++;
+            write(b);
+            i += 2;
+          } else if (a === '<') {
+            // Named capture: write '?<name>' as a single colored token
+            i++; // consume '<'
+            const start = i;
+            while (i < regexpString.length && regexpString[i] !== '>') {
+              i++;
+            }
+            const name = regexpString.slice(start, i);
+            if (i < regexpString.length && regexpString[i] === '>') {
+              depth--;
+              write('?<');
+              depth++;
+              write(name);
+              depth--;
+              write('>');
+              depth++;
+              i++;
+            } else {
+              depth--;
+              write('?<');
+              depth++;
+              write(name);
+            }
+          } else {
+            write('?');
+          }
+        }
+      }
+    } else if (ch === ')') {
+      depth--;
+      write(')');
+      i++;
+    } else if (ch === '\\') {
+      let seq = '\\';
+      i++;
+      if (i < regexpString.length) {
+        seq += regexpString[i++];
+        const next = seq[1];
+        if (i < regexpString.length) {
+          if (next === 'u' && regexpString[i] === '{') {
+            const str = findSequence(regexpString, i, '{', '}');
+            seq += str;
+            i += str.length;
+          } else if (next === 'x') {
+            seq += regexpString.slice(i, i + 2);
+            i += 2;
+          } else if (next >= '0' && next <= '9') {
+            while (i < regexpString.length && regexpString[i] >= '0' && regexpString[i] <= '9') {
+              seq += regexpString[i++];
+            }
+          } else if (next === 'k' && regexpString[i] === '<') {
+            const str = findSequence(regexpString, i, '<', '>');
+            seq += str;
+            i += str.length;
+          } else if ((next === 'p' || next === 'P') && regexpString[i] === '{') {
+            const str = findSequence(regexpString, i, '{', '}');
+            seq += str;
+            i += str.length;
+          }
+        }
+      }
+      depth++;
+      write(seq);
+      depth--;
+    } else if (ch === '|' || ch === '+' || ch === '*' || ch === '?' || ch === ',' || ch === '^' || ch === '$') {
+      depth += 3;
+      write(ch);
+      depth -= 3;
+      i++;
+    } else if (ch === '{') {
+      write('{');
+      depth++;
+      i++;
+      let digits = '';
+      while (i < regexpString.length && regexpString[i] >= '0' && regexpString[i] <= '9') {
+        digits += regexpString[i++];
+      }
+      if (digits) {
+        depth++;
+        write(digits);
+        depth--;
+      }
+      if (i < regexpString.length && regexpString[i] === ',') {
+        write(',');
+        i++;
+      }
+      let digits2 = '';
+      while (i < regexpString.length && regexpString[i] >= '0' && regexpString[i] <= '9') {
+        digits2 += regexpString[i++];
+      }
+      if (digits2) {
+        depth++;
+        write(digits2);
+        depth--;
+      }
+      if (i < regexpString.length && regexpString[i] === '}') {
+        depth--;
+        write('}');
+        i++;
+      }
+      if (i < regexpString.length && regexpString[i] === '?') {
+        // depth++;
+        write('?');
+        // depth--;
+        i++;
+      }
+    } else if (ch === '/') {
+      // Stop at closing delimiter (unescaped, outside of character class)
+      break;
+    } else {
+      depth++;
+      write(ch);
+      depth--;
+      i++;
+    }
+  }
+
+  // Closing delimiter and flags
+  if (i < regexpString.length && regexpString[i] === '/') {
+    depth--;
+    write('/');
+    i++;
+    if (i < regexpString.length) {
+      depth++;
+      write(regexpString.slice(i));
+    }
+  }
+  return out;
+}
+
 function addQuotes(str, quotes) {
   if (quotes === -1) {
     return `"${str}"`;
@@ -601,8 +853,12 @@ function stylizeWithColor(str, styleType) {
   const style = inspect.styles[styleType];
   if (style !== undefined) {
     const color = inspect.colors[style];
-    if (color !== undefined)
+    if (color !== undefined) {
       return `\u001b[${color[0]}m${str}\u001b[${color[1]}m`;
+    }
+    if (typeof style === 'function') {
+      return style(str);
+    }
   }
   return str;
 }
@@ -1038,9 +1294,10 @@ function formatRaw(ctx, value, recurseTimes, typedArray) {
       const prefix = getPrefix(constructor, tag, 'RegExp');
       if (prefix !== 'RegExp ')
         base = `${prefix}${base}`;
+      base = ctx.stylize(base, 'regexp');
       if ((keys.length === 0 && protoProps === undefined) ||
           (recurseTimes > ctx.depth && ctx.depth !== null)) {
-        return ctx.stylize(base, 'regexp');
+        return base;
       }
     } else if (isDate(value)) {
       // Make dates with properties first say the date