正则可视化在线工具-更直观地理解和调试正则表达式的利器
本帖最后由 Amd794 于 2023-11-6 22:49 编辑在工作和学习中，正则表达式是一种强大的工具，用于处理和分析文本数据。它可以帮助我们在海量数据中快速搜索、匹配和提取所需的信息。然而，正则表达式的语法复杂，很多人在编写和调试时可能会遇到困难。
为了解决这个问题，我决定自己编写一个正则工具。这个工具旨在提供一个直观且用户友好的界面，帮助用户更轻松地编写、测试和调试正则表达式。通过可视化的方式，用户可以清晰地看到正则表达式的结构和匹配结果，从而更好地理解和调试自己的正则表达式。
我相信这个正则工具将极大地提高我的工作效率和学习体验。它将成为我在处理文本数据时的得力助手，帮助我更快速、准确地完成各种正则操作。我期待着在工作和学习中充分利用这个工具，为我带来更多的便利和效益。
工具在线地址：https://amd794.com/regularGraph
正则可视化工具是一种用于帮助用户理解和调试正则表达式的工具。正则表达式是一种强大的模式匹配工具，用于在文本中搜索、替换和提取特定模式的字符串。
正则可视化工具提供以下功能：
1. 正则表达式编辑器：允许用户输入和编辑正则表达式。
2. 文本输入框：用户可以输入需要匹配的文本。
3. 匹配结果展示：显示正则表达式在文本中的匹配结果，通常以高亮方式展示。
4. 错误提示：如果正则表达式存在错误，工具可以提供错误提示和建议修复。
5. 正则表达式解释：工具可以解释正则表达式的含义和匹配规则，帮助用户理解其工作原理。
6. 替换功能：允许用户在文本中进行替换操作，将匹配的字符串替换为指定的内容。
7. 可视化分组：对于复杂的正则表达式，工具可以将匹配的分组可视化展示，以便用户更好地理解和调试。
正则可视化工具通常以图形界面的形式呈现，使用户可以直观地操作和观察正则表达式的匹配过程。这些工具可以帮助用户快速验证和调试正则表达式，提高开发效率。
核心代码：
html布局
```
<div class="match-group">
<el-input
v-model="inputText"
@input="handleInput"
:rows="4"
clearable
class="input"
type="textarea"
placeholder="input"
/>
<div class="center">
<el-text
v-html="matchText"
class="input"
/>
</div>
<el-input
v-model="outText"
:rows="4"
clearable
readonly
class="input"
type="textarea"
placeholder="output"
/>
<el-input v-model="replaceText" :placeholder="currentLang.repaceTips" clearable>
<template #append>
<el-button type="danger" @click="handleReplaceText">
{{ currentLang.replace }}
</el-button>
</template>
</el-input>
<div class="center">
<el-text
v-html="outReplaceText"
class="input"/>
</div>
</div>
```
1. 定义3个输入框做数据输入和输出
```
const inputText = ref('')
const matchText = ref('')
const outText = ref('')
const replaceText = ref('')
const outReplaceText = ref('')
```
2. 给匹配结果添加高亮显示和和输出正则匹配结果
```
const handleInput = () => {
const replacement = '<mark>$&</mark>'
const rule = new RegExp(Re.value, GotTText.value)
console.log('rule =====>', rule)
outText.value = inputText.value.match(rule)?.join('\n')
matchText.value = replace(replacement)
console.log(matchText.value)
}
```
注意：如果要保留输入的换行符需要将\n替换为html的br标签来保证输出的匹配结果换行
```
// todo 正则匹配
const inputText = ref('')
const matchText = ref('')
const outText = ref('')
const replaceText = ref('')
const outReplaceText = ref('')
const replace = (replacement) => {
const rule = new RegExp(Re.value, GotTText.value)
let result = ''
if (GotTText.value === 'g') {
result = inputText.value.replaceAll(rule, replacement)
} else {
result = inputText.value.replace(rule, replacement).replace(/\n/g, '<br>')
}
return result.replace(/\n/g, '<br>')
}
const handleInput = () => {
const replacement = '<mark>$&</mark>'
const rule = new RegExp(Re.value, GotTText.value)
console.log('rule =====>', rule)
outText.value = inputText.value.match(rule)?.join('\n')
matchText.value = replace(replacement)
console.log(matchText.value)
}
const handleReplaceText = () => {
outReplaceText.value = replace(replaceText.value)
}
// 监听
watch(, (newValue, oldValue) => {
handleInput()
})
```
给匹配结果添加高亮的时候可以用css来定制，我这里用的最简单的方法，就是用内置的mark标签。
编程语言区即日起严格执行新规则发帖，不符合要求删除处理，欢迎交流反馈！
https://www.52pojie.cn/thread-1691883-1-1.html
(出处: 吾爱破解论坛)
本版块仅限分享编程技术和源码相关内容，发布帖子必须带上关键代码和具体功能介绍
这是第一个.
以及楼主你自己网站里联系方式和公众号这么大个不去掉? 本帖最后由 提拉米苏子冉 于 2023-11-7 17:02 编辑
Amd794 发表于 2023-11-7 16:46
ping amd794.com
正在 Ping amd794.com 具有 32 字节的数据:
Ping 统计信息:
数据包: 已发送 = 4，已接收 = 4，丢失 = 0 (0% 丢失)，
往返行程的估计时间(以毫秒为单位):
最短 = 209ms，最长 = 252ms，平均 = 230ms 厉害啊，下次可以用了{:1_921:} 这个屌啊，有PC端吗？ 楼主的网站牛逼啊 本帖最后由 Amd794 于 2023-11-6 21:07 编辑
Strator 发表于 2023-11-6 20:43
这个屌啊，有PC端吗？
在线用不好吗，后面给网站加个PWA。{:1_904:} Amd794 发表于 2023-11-6 21:05
在线用不好吗，后面给网站加个PWA。
PWA也可以啊，主打一个离线应用，启动浏览器和一个离线应用还是一个离线应用比浏览器轻便，针对这样的工具软件，浏览器布局还是比较臃肿的。PWA完全可以做到无边框。 Strator 发表于 2023-11-6 21:26
PWA也可以啊，主打一个离线应用，启动浏览器和一个离线应用还是一个离线应用比浏览器轻便，针对这样的工 ...
好的，我倒是觉得在浏览器用比较方便:lol:lol:lol hrh123 发表于 2023-11-6 21:52
编程语言区即日起严格执行新规则发帖，不符合要求删除处理，欢迎交流反馈！
https://www.52pojie.cn/threa ...
哦哦，编辑好像不能改板块啊。 hrh123 发表于 2023-11-6 21:52
编程语言区即日起严格执行新规则发帖，不符合要求删除处理，欢迎交流反馈！
https://www.52pojie.cn/threa ...
你好，请问下编辑可以改板块吗？还是只能删除，好久没发过贴了一时没找到{:1_896:}