正则可视化调试 · 标签式布局

🎬

全功能演示

完整操作流程

📸

1 / 7

点击「解析」，就会只对 regex 进行解析，不进行匹配过程推理，所以步骤总数为 0。

点击「调试」，会解析 regex，并对字符串进行匹配，推理所有匹配项，显示步骤总数。

1. 在图上右键，选择「可视化独显」，会弹出显示可视化图的独立窗口。
2. 选择「Pattern 独显」，会弹出显示 regex 文本的独立窗口。
3. 可以选择只查看第一个匹配项的匹配过程。

拖动滑块，会在 Regex 文本和可视化图上实时显示匹配过程。停止拖动，会显示出所有捕获组的信息。

鼠标移动到右括号上，选择右键菜单的「添加结构锚点」，会创建只在当前右括号上执行的匹配步骤的滑块。

鼠标移动到右括号上，勾选「附带条件」，选择右键菜单的「添加结构锚点」，
会从当前右括号上执行的所有匹配步骤里，筛选出符合条件的步骤，并创建滑块。

左键双击可视化节点，可以对其内容进行原地编辑。

🖥️

功能

鼠标右键点击可视化界面，呼出菜单，点击 「可视化独显」和 「Pattern 独显」菜单，可以打开新窗口，在新窗口中单独显示可视化图和正则表达式文本，以便调试复杂的正则表达式。

✏️

功能

鼠标左键双击可视化图的节点，可以对相应的节点内容进行原地编辑，即时修改正则表达式中的对应部分。

🔴

功能

鼠标右键点击可视化界面，呼出菜单，点击 「锚点」菜单，可以添加符合条件的锚点滑块。

💡 将 全功能演示.gif 、 多屏调试演示.gif 、 编辑演示.gif 、 条件断点演示.gif 以及 1.png ~ 7.png 放在与 HTML 相同的目录下即可自动展示。