visual-regex
v2.0.5
Published
Visual Regex: convert RegularExpress to canvas or DOM
Downloads
16
Maintainers
Readme
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
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">(?<path></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'
}
}