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