reg-visualization
v1.0.4
Published
正则可视化工具
Downloads
7
Maintainers
Readme
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 | 绘制圆点的半径 |