reg-visualization

reg-visualization 一个前端项目使用的正则可视化工具

Install

Get the latest version from NPM:

npm install reg-visualization

Also available with yarn:

yarn add reg-visualization

Usage

Usage as library

import renderDom from 'reg-visualization';

const container = document.getElementById('container')

const reg = '^a(b|c)+[a-z]{1,}$'

renderDom(container, reg)

这将会在你的页面上渲染出正则的图形化规则

---

支持自定义一些样式规则的传入:

import renderDom from 'reg-visualization';

const container = document.getElementById('container')

const reg = '^a(b|c)+[a-z]{1,}$'

const options = {
  contentMargin: 16,
  fontColor: "#666",
}

renderDom(container, reg, options)

options:

key	类型	默认值	描述
contentMargin	number	10	内容到容器间距
borderColor	string	#333	边框颜色
borderWidth	number	2	形状节点的变框宽度
borderRadius	number	6	形状节点的圆角半径
groupBorderColor	string	#999	组边框的颜色
groupBorderWidth	number	1	组边框的宽度
fontFamily	string	'DejaVu Sans Mono,monospace'	默认字体
fontColor	string	#444	字体颜色
fontSize	number	14	字体大小
pathLen	number	16	svg 形状节点间距
padding	number	12	svg 形状节点的内边距
labelMargin	number	6	文本节点的外边距
pointR	number	6	绘制圆点的半径