Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://slevithan.github.io/regex-colorizer/demo/ below:

Regex Colorizer

• Size: 3.8 kB min/gzip, with no dependencies
• License: MIT

Regex Colorizer adds syntax highlighting to your regular expressions in blogs, docs, regex testers, and other tools. It supports the JavaScript regex flavor (ES2023) with web reality. In other words, it highlights regexes as web browsers actually interpret them.

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

^(?!000|666)(?:[0-6]\d{2}|7(?:[0-6]\d|7[012]))-(?!00)\d{2}-(?!0000)\d{4}$

(["'])(?:\\?.)*?\1

Type a regex pattern

Several themes are available as stylesheets. Select an option to change the highlighting styles for all regexes on this page.

You don't need to add a stylesheet to your page to use the default theme. Just run loadStyles().

The No BG theme avoids background colors as part of highlighting.

In 2007, RegexPal was the first web-based regex tester with regex syntax highlighting. Regex Colorizer started out by extracting RegexPal's highlighting code into a standalone library. This theme uses all black text, because RegexPal's implementation used highlighted text underneath a textarea with a transparent background. The RegexPal theme doesn't uniquely distinguish the following: escaped literal tokens, backreferences, and character class boundaries.

OG RegexBuddy's highlighting styles. RegexBuddy inspired RegexPal and many others. The RegexBuddy theme is based on older versions of the app which didn't uniquely distinguish the following: escaped literal tokens, backreferences, character class boundaries, and range-hyphens.

Errors are highlighted in red, along with some edge cases that can cause cross-browser grief. Hover over errors for a description of the problem.

Oh h\i+?? x*+ |? a{1,2}b{2,1} ||(?:a|b)* (?<=(?<name>x))* (?>n)
((((?:((a))b.c)d|x(y){65536,}))))
[^1-59-6\b-\cX.a-\w!---] \xFF \x \uFF\uFFFF\z\v\1\\\

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:

\+ 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)

Some other examples of contextually-aware highlighting:

• Named backreferences: \k<name> is only a named backreference if a named capture (with any name) appears in the regex, even if after or enclosing the backreference (so \k<n>(?<n>a) and (?<n>a\k<n>) are valid; the backreferences match empty strings). If there aren't any named captures in the pattern, it's an escaped literal \k<name> and matches the string 'k<name>'. When named backreference behavior is triggered, \k is an error if it's not a complete token (ex: (?<n>)\k), if the name is invalid (ex: (?<n>)\k<1>), or if there's no corresponding named capturing group anywhere in the regex (ex: (?<n>)\k<m>). Flags u and v enforce named backreference mode handling in all cases. And of course, named backreference syntax doesn't apply within character classes ([\k<n>]).
• Hypens in character classes: Hyphens only create ranges when preceded and followed by rangeable tokens in the correct order that aren't themselves part of ranges. Hyphens are literal - characters in other cases. Compare [----] (one range-hyphen), [-----] (still one), and [------] (two). Also handles errors (ex: [z-a] and [\w-z], but [\w-]) and metasequences or escaped literals that are used in valid ranges (ex: [a-\z] and [\b-\cZ], but [\cZ-\b]). Note: Within a character class, \b matches a backspace control character rather than a word boundary. Flag v changes the rules to make any unescaped, non-range hyphens in character classes become errors, and enables -- as the set substraction operator.

Here's how to highlight all your regexes like you can see running on this page:

import {colorizeAll, colorizePattern, loadStyles} from 'regex-colorizer';

// Don't run this line if you provide your own stylesheet
loadStyles();

// Highlight all elements with class `regex`
colorizeAll();

// Or provide a `querySelectorAll` value for elements to highlight
colorizeAll({
  selector: '.regex',
});

// Optionally provide flags
colorizeAll({
  // Flags provided in `data-flags` attributes will override this
  flags: 'u',
});

// You can also just get the highlighting HTML for a specific pattern
element.innerHTML = colorizePattern('(?<=\\d)', {
  flags: 'u',
});

In your HTML:

<p>
  This regex is highlighted inline:
  <code class="regex">(?&lt;=\d)\p{L}\8</code>.

  And here's the same regex but with different rules from flag u:
  <code class="regex" data-flags="u">(?&lt;=\d)\p{L}\8</code>.
  <!-- Can include any valid flags. Ex: data-flags="gimsuyd" -->
</p>

Output:

This regex is highlighted inline: (?<=\d)\p{L}\8. And here's the same regex but with different rules from flag u: (?<=\d)\p{L}\8.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3