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: 4 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 (over 12 years ago)
• Default Branch: master
• Last Pushed: 2024-08-18T18:42:58.000Z (4 months ago)
• Last Synced: 2024-12-13T23:53:57.494Z (11 days ago)
• Topics: regex, regexp, regular-expression, syntax-highlighting
• Language: JavaScript
• Homepage: https://slevithan.github.io/regex-colorizer/demo/
• Size: 173 KB
• Stars: 176
• Watchers: 10
• Forks: 23
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

README

        
# Regex Colorizer

Regex Colorizer is a lightweight library (5 KB min/gzip, no dependencies) for adding syntax highlighting to your regular expressions in blogs, docs, regex testers, and other tools. It 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 `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.

## Demo

Try it out on the [**demo page**](https://slevithan.github.io/regex-colorizer/demo/), which also includes more details.

## Install and use

> [!IMPORTANT]

> The latest versions are not yet available on npm or CDNs due to an ongoing issue. Until it's resolved, Regex Colorizer needs to be downloaded from GitHub.

```sh

npm install regex-colorizer

```

```js

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

```

In browsers (using a global name):

```html

  const {colorizeAll, colorizePattern, loadStyles} = RegexColorizer;

```

## 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 `loadStyles()`.

## Usage

```js

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

// Or, if using the browser bundle:

// const {colorizeAll, colorizePattern, loadStyles} = RegexColorizer;

// 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:

```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.



```