Yannick/vue-regex
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

final

Browse source
This commit is contained in:
Yannick 2025-04-02 23:56:15 +02:00
parent 3514c4df4e
commit 390974b8f3
2 changed files with 76 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
src/App.vue
View file

@ -26,76 +26,84 @@ const availableRules = computed(() => {
let rules = reactive([ let rules = reactive([
{ {
engname: "Strings can be simply matched by setting them as a regex Rule", "engname": "String match with regex rule",
engdescription: "Nothing yet", "engdescription": "Use strings as regex to match exact text patterns.",
gername: "aaaa", "gername": "Zeichenkette als Regex-Regel",
gerdescription: "", "gerdescription": "Nutze Strings als regex um exakte Strings zu finden.",
name: "", "id": 0,
description: "", "examples": ["hello", "world"]
id: 0
}, },
{ {
engname: "Dots represent any number of any Character", "engname": "Dots match any character",
engdescription: "Nothing yet", "engdescription": "Use a dot to match any single character except newline characters.",
gername: "", "gername": "Punkte als Platzhalter",
gerdescription: "", "gerdescription": "Nutze einen Punkt (.) um ein beliebiges einzelnen Zeichen abgesehen von Zeilenumbrüchen zu matchen.",
id: 1 "id": 1,
"examples": ["h.t", "a.c"]
}, },
{ {
engname: "Put characters in square brackets to match any of them", "engname": "Square brackets for multiple characters",
engdescription: "Nothing yet", "engdescription": "Use square brackets to match any characters in them.",
gername: "", "gername": "Eckige Klammern für mehrere Klassen",
gerdescription: "", "gerdescription": "Nutze eckige Klammern um jegliches Zeichen in diesen zu matchen.",
id: 2 "id": 2,
"examples": ["[abc]", "[123]"]
}, },
{ {
engname: "Put a range of numbers inside square brackets with a dash in between to match a range", "engname": "Square brackets for range",
engdescription: "Nothing yet", "engdescription": "Use square brackets with a dash [-] to specify a range of characters or numbers.",
gername: "", "gername": "Bereich mit eckigen Klammern",
gerdescription: "", "gerdescription": "Nutze einen Strich [-] um einen Bereich von Zeichen oder Zahlen zu matchen.",
id: 3 "id": 3,
"examples": ["[a-z]", "[0-9]"]
}, },
{ {
engname: "Use an asterisk to match any amount of a specific character", "engname": "Stars for zero or multiple characters",
engdescription: "Nothing yet", "engdescription": "Use stars (*) to matches zero or more occurrences of a specific character.",
gername: "", "gername": "Sternchen für null oder mehrere Zeichen",
gerdescription: "", "gerdescription": "Nutze einen Stern (*) um null oder mehreren malen eines bestimmten Zeichen zu matchen.",
id: 4 "id": 4,
"examples": ["a*", "b*"]
}, },
{ {
engname: "Use a plus sign to match a specific character if it exists one or more times", "engname": "Plus sign for one or more characters",
engdescription: "Nothing yet", "engdescription": "Use pluses (+) to match one or more occurrences of a specific character.",
gername: "", "gername": "Pluszeichen für ein oder mehr Zeichen",
gerdescription: "", "gerdescription": "Nutze das Plus (+) um einem oder mehreren malen eines bestimmten Zeichen zu matchen.",
id: 5 "id": 5,
"examples": ["a+", "1+"]
}, },
{ {
engname: "Use a question mark to match a character that could exist optionally", "engname": "Question mark for optional character",
engdescription: "Nothing yet", "engdescription": "Use the question mark (?) matches zero or one occurrence of a specific character.",
gername: "", "gername": "Fragezeichen für optionales Zeichen",
gerdescription: "", "gerdescription": "Nutze das Fragezeichen (?) um null oder einem Vorkommen eines bestimmten Zeichens zu matchen.",
id: 6 "id": 6,
"examples": ["a?", "b?"]
}, },
{ {
engname: "To match a specific amount of a specific character, use curly braces", "engname": "Curly braces for exact amount",
engdescription: "Nothing yet", "engdescription": "Curly braces {} are used to specify the exact number of occurrences of a character.",
gername: "", "gername": "Geschweifte Klammern für genaue Anzahl",
gerdescription: "", "gerdescription": "Nutze geschweifte Klammern {} um die genaue Anzahl eines Zeichens zu matchen.",
id: 7 "id": 7,
"examples": ["a{3}", "b{2}"]
}, },
{ {
engname: "To match a specific amount or a higher amount of a specific character, use curly braces with a comma", "engname": "Curly braces for minimum amount",
engdescription: "Nothing yet", "engdescription": "User curly braces with a comma {n,} to match at least 'n' occurrences of a specific characters.",
gername: "", "gername": "Mindestens Anzahl mit geschweiften Klammern",
gerdescription: "", "gerdescription": "Nutze geschweifte Klammern mit einem Komma {n,} um mindestens 'n' Anzahl eines bestimmten Zeichens zu matchen.",
id: 8 "id": 8,
"examples": ["a{2,}", "1{3,}"]
}, },
{ {
engname: "To match a number of characters within a specific range, use curly braces with the range and a comma in between", "engname": "Curly braces for range",
engdescription: "Nothing yet", "engdescription": "User curly braces with a range {n,m} match between 'n' and 'm' occurrences of a specific character.",
gername: "", "gername": "Bereich mit geschweiften Klammern",
gerdescription: "", "gerdescription": "Nutze geschweifte Klammern mit einem Bereich {n,m} um zwischen 'n' und 'm' Anzahl eines bestimmten Zeichens zu matchen.",
id: 9 "id": 9,
"examples": ["a{2,4}", "b{1,3}"]
} }
] ]
) )
@ -114,6 +122,18 @@ let rules = reactive([
<Rule :currentRule="currentRule" :rules="rules" /> <Rule :currentRule="currentRule" :rules="rules" />
<br> <br>
<button @click="toggleLang">{{ lang ? "Toggele Sprache" : "Toggle language" }}</button> <button @click="toggleLang">{{ lang ? "Toggele Sprache" : "Toggle language" }}</button>
<p>Credits: <a href="https://regexone.com/">https://regexone.com/</a></p>
</template> </template>
<style scoped></style> <style>
body {
background-color: #002626;
}
p, h3 {
color: #EFE7DA;
}
h2 {
color: #95C623
}
</style>

4
src/components/Rule.vue
View file

@ -13,5 +13,7 @@ const currentRuleObj = computed(() => {
<template> <template>
<h2>Rule: {{ currentRuleObj.name }}</h2> <h2>Rule: {{ currentRuleObj.name }}</h2>
{{ currentRuleObj.description }} <p> {{ currentRuleObj.description }} </p>
<h3>Examples:</h3>
<p v-for="example in currentRuleObj.examples"> {{ example }}</p>
</template> </template>