visual-regex v2.0.5

visualRegex

Visual regular expressions.

Support convert to canvas and DOM.

For now, only support JavaScript's Regular-Expression syntax.

More about Regular-Expression syntax: MDN

HomePage

https://wangwl.net/r/vr

Usage

visual regex to canvas

import visualRegex from 'visual-regex';

let visual = visualRegex(/https?:\/\/wangwl\.net(?<path>\/r\/vr)/);
let canvas = visual.visualCanvas();

document.body.appendChild(canvas);  // below image

visual regex to DOM

import visualRegex from 'visual-regex';

let visual = visualRegex(/https?:\/\/wangwl\.net(?<path>\/r\/vr)/);
let spanEle = visual.visualDom({prefix: 'vr_'});

spanEle.className = "vr_root";
document.body.appendChild(spanEle);

// <span class="vr_root">
//     <span class="vr_literal">http</span>
//     <span class="vr_literal">s</span>
//     <span class="vr_closure">?</span>
//     <span class="vr_literal">:\/\/wangwl\.net</span>
//     <span class="vr_groupWrapper">
//         <span class="vr_namedGroup">(?&lt;path&gt;</span>
//         <span class="vr_literal">\/r\/vr</span>
//         <span class="vr_namedGroup">)</span>
//     </span>
// </span>

API

const visualRegex = (regex: typeof RegExp) => ({
    visualCanvas: () => HTMLCanvasElement,
    visualDom: (visualDomOpt?: IVisualDomOpt) => HTMLElement
})

interface IVisualDomOpt {
    tagName?: 'span',
    prefix?: 'vr_',
    className?: {
        groupWrapper?: 'groupWrapper',
        lookaroundWrapper?: 'lookaroundWrapper',
        setWrapper?: 'setWrapper',

        normalGroup?: 'normalGroup',
        nonCaptureGroup?: 'nonCaptureGroup',
        namedGroup?: 'namedGroup',
        lookahead?: 'lookahead',
        negativeLookahead?: 'negativeLookahead',
        lookbehind?: 'lookbehind',
        negativeLookbehind?: 'negativeLookbehind',

        either?: 'either',

        literal?: 'literal',
        literalBlank?: 'literalBlank',
        specialSet?: 'specialSet',
        boundary?: 'boundary',
        set?: 'set',
        backRef?: 'backRef',
        dot?: 'dot',

        closure?: 'closure',
        nonGreedyClosure?: 'nonGreedyClosure'
    }
}