From 712169b53b5cfffdc9240aa96a2bfb4e3b32918c Mon Sep 17 00:00:00 2001 From: Steven Levithan Date: Fri, 17 May 2024 15:33:58 +0200 Subject: [PATCH] Update octal/backref example based on modernized handling --- README.md | 2 +- demo/index.html | 22 ++++++++++++---------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 34aaa27..4aa0285 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Regex Colorizer adds syntax highlighting to your regular expressions in blogs, docs, regex testers, and other tools. Supports the **JavaScript regex flavor** ([ES2022](https://github.com/slevithan/awesome-regex#javascript-regex-evolution)) with **web reality**. In other words, it highlights regexes as web browsers actually interpret them. ES2024's flag `v` is not yet supported. -The API is simple. Just give the elements that contain your regexes (`pre`, `code`, or whatever) the class `regex`, and call a couple functions (see below). +The API is simple. Just give the elements that contain your regexes (`pre`, `code`, or whatever) the class `regex`, and call `RegexColorizer.colorizeAll()`. See more usage examples below. Errors are highlighted, along with some edge cases that can cause cross-browser grief. Hover over errors for a description of the problem. diff --git a/demo/index.html b/demo/index.html index 27db4ec..bda2cc6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -26,7 +26,7 @@

  • License: MIT

    • Regex Colorizer adds syntax highlighting to your regular expressions in blogs, docs, regex testers, and other tools. Supports the JavaScript regex flavor (ES2022) with web reality. In other words, it highlights regexes as web browsers actually interpret them. ES2024's flag v is not yet supported.

    -

    The API is simple. Just give the elements that contain your regexes (pre, code, or whatever) the class regex, and call a couple functions (see below).

    +

    The API is simple. Just give the elements that contain your regexes (pre, code, or whatever) the class regex, and call RegexColorizer.colorizeAll(). See more usage examples below.

    Examples

    SSN, excluding invalid ranges

    @@ -62,16 +62,18 @@

    Regex with errors

    ((((?:((a))b.c)d|x(y){65536,})))) [^1-59-6\b-\cX.a-\w!---] \xFF \x \uFF\uFFFF\z\v\1\\\

    Octals and backreferences

    -

    Regex syntax is complex, so Regex Colorizer's highlighting is contextually aware of things that happen forward and backward in the regex. Here's an example of contextually-aware highlighting of regex syntax/behavior in web reality:

    +

    Regex syntax is complex, so Regex Colorizer's highlighting is contextually aware of things that happen forward and backward in the regex. Here's an example of contextually-aware highlighting of regex syntax:

    - 
    \\ Octals: leading 0 extends length
-\1234 \01234 \00123 \00000 \18 \80 \377 \400
-\\ After a capturing group
-(1) \10 \01000 \2000 \k<1>
-\\ Different rules for leading 0 in character classes
-[ \1234 is the same but not \0123 ]
-\\ Double-digit backreferences
-(2)(3)(?<name>4)(5)(6)(7)(8)(9)(10) \100 \11 \80
    + 
    \+ Escapes are backreferences if num <= capturing groups
+\1 \8 \9 \10 \k<1> \k<name>
+\+ Octals: leading 0 extends length
+\11 \100 \1234 \01234 \00123 \0 \00 \00000 \377 \400
+\+ Non-octal digits
+\18 \80 \90
+\+ Leading 0 in character class doesn't extend length
+[ \1234 is the same but not \0123; no backrefs \1 ]
+\+ Capturing groups can appear after their backrefs
+(1)(2)(?<name>3)(4)(5)(6)(7)(8)(9)(10)