This commit is contained in:
steffenrapp 2024-09-20 19:59:02 +00:00
parent 6b8cfca29d
commit bb7d703cc5
5 changed files with 79 additions and 22 deletions

View file

@ -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.

View file

@ -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.

View file

@ -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,

View file

@ -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,

View file

@ -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">
&#xa0; &#xa0;
</shadow-root> </shadow-root>