mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-04 13:29:13 -04:00
regex
This commit is contained in:
parent
6b8cfca29d
commit
bb7d703cc5
5 changed files with 79 additions and 22 deletions
|
@ -527,3 +527,33 @@ tools:
|
||||||
html: 'HTML-Ausgabe:'
|
html: 'HTML-Ausgabe:'
|
||||||
button:
|
button:
|
||||||
print: Als PDF drucken
|
print: Als PDF drucken
|
||||||
|
regex-memo:
|
||||||
|
title: Regex-Spickzettel
|
||||||
|
description: Spickzettel für Javascript Regex/Regulärer Ausdruck
|
||||||
|
regex-tester:
|
||||||
|
title: Regex-Tester
|
||||||
|
description: >-
|
||||||
|
Teste einen regulären Ausdruck, erhalte eine Liste mit Treffern und ein
|
||||||
|
Diagramm.
|
||||||
|
regex-input: 'Regex zum Testen:'
|
||||||
|
regex-input-placeholder: Eingabe des zu testenden regulären Ausdrucks
|
||||||
|
link: Siehe Spickzettel für reguläre Ausdrücke
|
||||||
|
text-input: 'Zu prüfender Text:'
|
||||||
|
text-input-placeholder: Eingabe des zu prüfenden Texts
|
||||||
|
matches: Treffer
|
||||||
|
text-index: Index im Text
|
||||||
|
value: Wert
|
||||||
|
captures: Erfassungen
|
||||||
|
groups: Gruppen
|
||||||
|
sample: Beispiel für passenden Text
|
||||||
|
diagram: Regex-Diagramm
|
||||||
|
global: Globale Suche
|
||||||
|
ignoreCase: Suche ohne Berücksichtigung der Groß-/Kleinschreibung
|
||||||
|
multiline: Ermöglicht die Übereinstimmung von ^ und $ neben Zeilenumbruchzeichen.
|
||||||
|
dotAll: |-
|
||||||
|
Ermöglicht .
|
||||||
|
passend zu Zeilenumbruchzeichen.
|
||||||
|
unicode: |-
|
||||||
|
Unicode;
|
||||||
|
behandelt ein Muster als eine Folge von Unicode-Codepunkten.
|
||||||
|
unicodeSets: Ein Upgrade zum U-Modus mit mehr Unicode-Funktionen.
|
||||||
|
|
|
@ -496,3 +496,27 @@ tools:
|
||||||
html: 'Output HTML:'
|
html: 'Output HTML:'
|
||||||
button:
|
button:
|
||||||
print: Print as PDF
|
print: Print as PDF
|
||||||
|
regex-memo:
|
||||||
|
title: Regex cheatsheet
|
||||||
|
description: Javascript Regex/Regular Expression cheatsheet
|
||||||
|
regex-tester:
|
||||||
|
title: Regex Tester
|
||||||
|
description: Test a regular expression, get a list of matches and a diagram.
|
||||||
|
regex-input: 'Regex to test:'
|
||||||
|
regex-input-placeholder: Put the regex to test
|
||||||
|
link: See Regular Expression Cheatsheet
|
||||||
|
text-input: 'Text to match:'
|
||||||
|
text-input-placeholder: Put the text to match
|
||||||
|
matches: Matches
|
||||||
|
text-index: Index in text
|
||||||
|
value: Value
|
||||||
|
captures: Captures
|
||||||
|
groups: Groups
|
||||||
|
sample: Sample matching text
|
||||||
|
diagram: Regex Diagram
|
||||||
|
global: Global search
|
||||||
|
ignoreCase: Case-insensitive search
|
||||||
|
multiline: Allows ^ and $ to match next to newline characters.
|
||||||
|
dotAll: Allows . to match newline characters.
|
||||||
|
unicode: Unicode; treat a pattern as a sequence of Unicode code points.
|
||||||
|
unicodeSets: An upgrade to the u mode with more Unicode features.
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
import { BrandJavascript } from '@vicons/tabler';
|
import { BrandJavascript } from '@vicons/tabler';
|
||||||
import { defineTool } from '../tool';
|
import { defineTool } from '../tool';
|
||||||
|
import { translate } from '@/plugins/i18n.plugin';
|
||||||
|
|
||||||
export const tool = defineTool({
|
export const tool = defineTool({
|
||||||
name: 'Regex cheatsheet',
|
name: translate('tools.regex-memo.title'),
|
||||||
path: '/regex-memo',
|
path: '/regex-memo',
|
||||||
description: 'Javascript Regex/Regular Expression cheatsheet',
|
description: translate('tools.regex-memo.description'),
|
||||||
keywords: ['regex', 'regular', 'expression', 'javascript', 'memo', 'cheatsheet'],
|
keywords: ['regex', 'regular', 'expression', 'javascript', 'memo', 'cheatsheet'],
|
||||||
component: () => import('./regex-memo.vue'),
|
component: () => import('./regex-memo.vue'),
|
||||||
icon: BrandJavascript,
|
icon: BrandJavascript,
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
import { Language } from '@vicons/tabler';
|
import { Language } from '@vicons/tabler';
|
||||||
import { defineTool } from '../tool';
|
import { defineTool } from '../tool';
|
||||||
|
import { translate } from '@/plugins/i18n.plugin';
|
||||||
|
|
||||||
export const tool = defineTool({
|
export const tool = defineTool({
|
||||||
name: 'Regex Tester',
|
name: translate('tools.regex-tester.title'),
|
||||||
path: '/regex-tester',
|
path: '/regex-tester',
|
||||||
description: 'Regex Tester',
|
description: translate('tools.regex-tester.description'),
|
||||||
keywords: ['regex', 'tester', 'sample', 'expression'],
|
keywords: ['regex', 'tester', 'sample', 'expression'],
|
||||||
component: () => import('./regex-tester.vue'),
|
component: () => import('./regex-tester.vue'),
|
||||||
icon: Language,
|
icon: Language,
|
||||||
|
|
|
@ -15,6 +15,7 @@ const dotAll = ref(true);
|
||||||
const unicode = ref(true);
|
const unicode = ref(true);
|
||||||
const unicodeSets = ref(false);
|
const unicodeSets = ref(false);
|
||||||
const visualizerSVG = ref<ShadowRootExpose>();
|
const visualizerSVG = ref<ShadowRootExpose>();
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
const regexValidation = useValidation({
|
const regexValidation = useValidation({
|
||||||
source: regex,
|
source: regex,
|
||||||
|
@ -95,33 +96,33 @@ watchEffect(
|
||||||
<c-card title="Regex" mb-1>
|
<c-card title="Regex" mb-1>
|
||||||
<c-input-text
|
<c-input-text
|
||||||
v-model:value="regex"
|
v-model:value="regex"
|
||||||
label="Regex to test:"
|
:label="t('tools.regex-tester.regex-input')"
|
||||||
placeholder="Put the regex to test"
|
:placeholder="t('tools.regex-tester.regex-input-placeholder')"
|
||||||
multiline
|
multiline
|
||||||
rows="3"
|
rows="3"
|
||||||
:validation="regexValidation"
|
:validation="regexValidation"
|
||||||
/>
|
/>
|
||||||
<router-link target="_blank" to="/regex-memo" mb-1 mt-1>
|
<router-link target="_blank" to="/regex-memo" mb-1 mt-1>
|
||||||
See Regular Expression Cheatsheet
|
{{ t('tools.regex-tester.link') }}
|
||||||
</router-link>
|
</router-link>
|
||||||
<n-space>
|
<n-space>
|
||||||
<n-checkbox v-model:checked="global">
|
<n-checkbox v-model:checked="global">
|
||||||
<span title="Global search">Global search. (<code>g</code>)</span>
|
<span :title="t('tools.regex-tester.global')">Global search (<code>g</code>)</span>
|
||||||
</n-checkbox>
|
</n-checkbox>
|
||||||
<n-checkbox v-model:checked="ignoreCase">
|
<n-checkbox v-model:checked="ignoreCase">
|
||||||
<span title="Case-insensitive search">Case-insensitive search. (<code>i</code>)</span>
|
<span :title="t('tools.regex-tester.ignoreCase')">Case-insensitive search (<code>i</code>)</span>
|
||||||
</n-checkbox>
|
</n-checkbox>
|
||||||
<n-checkbox v-model:checked="multiline">
|
<n-checkbox v-model:checked="multiline">
|
||||||
<span title="Allows ^ and $ to match next to newline characters.">Multiline(<code>m</code>)</span>
|
<span :title="t('tools.regex-tester.multiline')">Multiline (<code>m</code>)</span>
|
||||||
</n-checkbox>
|
</n-checkbox>
|
||||||
<n-checkbox v-model:checked="dotAll">
|
<n-checkbox v-model:checked="dotAll">
|
||||||
<span title="Allows . to match newline characters.">Singleline(<code>s</code>)</span>
|
<span :title="t('tools.regex-tester.dotAll')">Singleline (<code>s</code>)</span>
|
||||||
</n-checkbox>
|
</n-checkbox>
|
||||||
<n-checkbox v-model:checked="unicode">
|
<n-checkbox v-model:checked="unicode">
|
||||||
<span title="Unicode; treat a pattern as a sequence of Unicode code points.">Unicode(<code>u</code>)</span>
|
<span :title="t('tools.regex-tester.unicode')">Unicode (<code>u</code>)</span>
|
||||||
</n-checkbox>
|
</n-checkbox>
|
||||||
<n-checkbox v-model:checked="unicodeSets">
|
<n-checkbox v-model:checked="unicodeSets">
|
||||||
<span title="An upgrade to the u mode with more Unicode features.">Unicode Sets (<code>v</code>)</span>
|
<span :title="t('tools.regex-tester.unicodeSets')">Unicode Sets (<code>v</code>)</span>
|
||||||
</n-checkbox>
|
</n-checkbox>
|
||||||
</n-space>
|
</n-space>
|
||||||
|
|
||||||
|
@ -129,28 +130,28 @@ watchEffect(
|
||||||
|
|
||||||
<c-input-text
|
<c-input-text
|
||||||
v-model:value="text"
|
v-model:value="text"
|
||||||
label="Text to match:"
|
:label="t('tools.regex-tester.text-input')"
|
||||||
placeholder="Put the text to match"
|
:placeholder="t('tools.regex-tester.text-input-placeholder')"
|
||||||
multiline
|
multiline
|
||||||
rows="5"
|
rows="5"
|
||||||
/>
|
/>
|
||||||
</c-card>
|
</c-card>
|
||||||
|
|
||||||
<c-card title="Matches" mb-1 mt-3>
|
<c-card :title="t('tools.regex-tester.matches')" mb-1 mt-3>
|
||||||
<n-table v-if="results?.length > 0">
|
<n-table v-if="results?.length > 0">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">
|
<th scope="col">
|
||||||
Index in text
|
{{ t('tools.regex-tester.text-index') }}
|
||||||
</th>
|
</th>
|
||||||
<th scope="col">
|
<th scope="col">
|
||||||
Value
|
{{ t('tools.regex-tester.value') }}
|
||||||
</th>
|
</th>
|
||||||
<th scope="col">
|
<th scope="col">
|
||||||
Captures
|
{{ t('tools.regex-tester.captures') }}
|
||||||
</th>
|
</th>
|
||||||
<th scope="col">
|
<th scope="col">
|
||||||
Groups
|
{{ t('tools.regex-tester.groups') }}
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
@ -180,11 +181,11 @@ watchEffect(
|
||||||
</c-alert>
|
</c-alert>
|
||||||
</c-card>
|
</c-card>
|
||||||
|
|
||||||
<c-card title="Sample matching text" mt-3>
|
<c-card :title="t('tools.regex-tester.sample')" mt-3>
|
||||||
<pre style="white-space: pre-wrap; word-break: break-all;">{{ sample }}</pre>
|
<pre style="white-space: pre-wrap; word-break: break-all;">{{ sample }}</pre>
|
||||||
</c-card>
|
</c-card>
|
||||||
|
|
||||||
<c-card title="Regex Diagram" style="overflow-x: scroll;" mt-3>
|
<c-card :title="t('tools.regex-tester.diagram')" style="overflow-x: scroll;" mt-3>
|
||||||
<shadow-root ref="visualizerSVG">
|
<shadow-root ref="visualizerSVG">
|
||||||
 
|
 
|
||||||
</shadow-root>
|
</shadow-root>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue