https://github.com/slevithan/regex-colorizer

Highlighter for JavaScript regex syntax
https://github.com/slevithan/regex-colorizer

regex regexp regular-expression syntax-highlighting

Last synced: 26 days ago
JSON representation

Highlighter for JavaScript regex syntax

• Host: GitHub
• URL: https://github.com/slevithan/regex-colorizer
• Owner: slevithan
• License: mit
• Created: 2012-05-09T07:03:39.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2024-05-20T18:22:20.000Z (about 1 month ago)
• Last Synced: 2024-05-20T21:23:08.474Z (about 1 month ago)
• Topics: regex, regexp, regular-expression, syntax-highlighting
• Language: JavaScript
• Homepage: https://slevithan.github.io/regex-colorizer/demo/
• Size: 156 KB
• Stars: 165
• Watchers: 10
• Forks: 23
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-regex - Regex Colorizer - colorizer/demo/)], [CodeMirror PCRE mode](https://github.com/xavierog/codemirror-mode-pcre). (JavaScript regex libraries / Regex processors)

README

        
# Regex Colorizer 1.0.0

[](https://github.com/slevithan/awesome-regex) Included in


[Awesome Regex](https://github.com/slevithan/awesome-regex)

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.

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.

[5 KB min/gzip, no dependencies.]

## Themes

Several themes are available as stylesheets, but you don't need to add a stylesheet to your page to use the default theme. Just run `RegexColorizer.loadStyles()`.

## Usage

```js

// Don't run this line if you provide your own stylesheet

RegexColorizer.loadStyles();

// Highlight all elements with class 'regex'

RegexColorizer.colorizeAll();

// Or provide a querySelectorAll value for elements to highlight

RegexColorizer.colorizeAll({

  selector: '.regex',

});

// Optionally provide flags

RegexColorizer.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 = RegexColorizer.colorizePattern('(?<=\\d)', {

  flags: 'u',

});

```

In your HTML:

```html



  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.



```

## Demo

See the [demo page](https://slevithan.github.io/regex-colorizer/demo/) for more details.