Αντιστοίχιση Προτύπων στη JavaScript με Κανονικές Εκφράσεις: Ένας Ολοκληρωμένος Οδηγός

Οι κανονικές εκφράσεις (regex) είναι ένα ισχυρό εργαλείο για την αντιστοίχιση προτύπων και τον χειρισμό κειμένου στη JavaScript. Επιτρέπουν στους προγραμματιστές να αναζητούν, να επικυρώνουν και να μετασχηματίζουν συμβολοσειρές βάσει καθορισμένων προτύπων. Αυτός ο οδηγός παρέχει μια ολοκληρωμένη επισκόπηση των κανονικών εκφράσεων στη JavaScript, καλύπτοντας τη σύνταξη, τη χρήση και τις προηγμένες τεχνικές.

Τι είναι οι Κανονικές Εκφράσεις;

Μια κανονική έκφραση είναι μια ακολουθία χαρακτήρων που ορίζει ένα πρότυπο αναζήτησης. Αυτά τα πρότυπα χρησιμοποιούνται για την αντιστοίχιση και τον χειρισμό συμβολοσειρών. Οι κανονικές εκφράσεις χρησιμοποιούνται ευρέως στον προγραμματισμό για εργασίες όπως:

• Επικύρωση Δεδομένων: Διασφάλιση ότι η εισαγωγή του χρήστη συμμορφώνεται με συγκεκριμένες μορφές (π.χ., διευθύνσεις email, αριθμοί τηλεφώνου).
• Εξαγωγή Δεδομένων: Ανάκτηση συγκεκριμένων πληροφοριών από κείμενο (π.χ., εξαγωγή ημερομηνιών, URL ή τιμών).
• Αναζήτηση και Αντικατάσταση: Εύρεση και αντικατάσταση κειμένου βάσει σύνθετων προτύπων.
• Επεξεργασία Κειμένου: Διαίρεση, συνένωση ή μετασχηματισμός συμβολοσειρών βάσει καθορισμένων κανόνων.

Δημιουργία Κανονικών Εκφράσεων στη JavaScript

Στη JavaScript, οι κανονικές εκφράσεις μπορούν να δημιουργηθούν με δύο τρόπους:

1. Χρησιμοποιώντας ένα Literal Κανονικής Έκφρασης: Περιβάλετε το πρότυπο μέσα σε κάθετες (/).
2. Χρησιμοποιώντας τον Κατασκευαστή RegExp: Δημιουργήστε ένα αντικείμενο RegExp με το πρότυπο ως συμβολοσειρά.

Παράδειγμα:

// Χρησιμοποιώντας ένα literal κανονικής έκφρασης
const regexLiteral = /hello/;

// Χρησιμοποιώντας τον κατασκευαστή RegExp
const regexConstructor = new RegExp("hello");

Η επιλογή μεταξύ των δύο μεθόδων εξαρτάται από το αν το πρότυπο είναι γνωστό κατά τη μεταγλώττιση ή δημιουργείται δυναμικά. Χρησιμοποιήστε τη σημειογραφία literal όταν το πρότυπο είναι σταθερό και γνωστό εκ των προτέρων. Χρησιμοποιήστε τον κατασκευαστή όταν το πρότυπο πρέπει να δημιουργηθεί προγραμματιστικά, ειδικά όταν ενσωματώνετε μεταβλητές.

Βασική Σύνταξη Regex

Οι κανονικές εκφράσεις αποτελούνται από χαρακτήρες που αντιπροσωπεύουν το πρότυπο που πρέπει να αντιστοιχιστεί. Εδώ είναι μερικά θεμελιώδη στοιχεία των regex:

• Κυριολεκτικοί Χαρακτήρες: Αντιστοιχούν στους ίδιους τους χαρακτήρες (π.χ., το /a/ αντιστοιχεί στον χαρακτήρα 'a').
• Μεταχαρακτήρες: Έχουν ειδικές σημασίες (π.χ., ., ^, $, *, +, ?, [], {}, (), \, |).
• Κλάσεις Χαρακτήρων: Αντιπροσωπεύουν σύνολα χαρακτήρων (π.χ., το [abc] αντιστοιχεί στο 'a', 'b' ή 'c').
• Ποσοδείκτες: Καθορίζουν πόσες φορές πρέπει να εμφανιστεί ένας χαρακτήρας ή μια ομάδα (π.χ., *, +, ?, {n}, {n,}, {n,m}).
• Άγκυρες: Αντιστοιχούν σε θέσεις στη συμβολοσειρά (π.χ., το ^ αντιστοιχεί στην αρχή, το $ αντιστοιχεί στο τέλος).

Συνήθεις Μεταχαρακτήρες:

• . (τελεία): Αντιστοιχεί σε οποιονδήποτε μεμονωμένο χαρακτήρα εκτός από τη νέα γραμμή.
• ^ (caret): Αντιστοιχεί στην αρχή της συμβολοσειράς.
• $ (δολάριο): Αντιστοιχεί στο τέλος της συμβολοσειράς.
• * (αστερίσκος): Αντιστοιχεί σε μηδέν ή περισσότερες εμφανίσεις του προηγούμενου χαρακτήρα ή ομάδας.
• + (συν): Αντιστοιχεί σε μία ή περισσότερες εμφανίσεις του προηγούμενου χαρακτήρα ή ομάδας.
• ? (ερωτηματικό): Αντιστοιχεί σε μηδέν ή μία εμφάνιση του προηγούμενου χαρακτήρα ή ομάδας. Χρησιμοποιείται για προαιρετικούς χαρακτήρες.
• [] (τετράγωνες αγκύλες): Ορίζει μια κλάση χαρακτήρων, αντιστοιχώντας σε οποιονδήποτε μεμονωμένο χαρακτήρα εντός των αγκυλών.
• {} (άγκιστρα): Καθορίζει τον αριθμό των εμφανίσεων που πρέπει να αντιστοιχηθούν. Το {n} αντιστοιχεί ακριβώς n φορές, το {n,} αντιστοιχεί n ή περισσότερες φορές, το {n,m} αντιστοιχεί μεταξύ n και m φορών.
• () (παρενθέσεις): Ομαδοποιεί χαρακτήρες και συλλαμβάνει την αντιστοιχισμένη υποσυμβολοσειρά.
• \ (κάθετος): Διαφεύγει από μεταχαρακτήρες, επιτρέποντάς σας να τους αντιστοιχίσετε κυριολεκτικά.
• | (pipe): Λειτουργεί ως τελεστής "ή", αντιστοιχώντας είτε την έκφραση πριν είτε μετά από αυτόν.

Κλάσεις Χαρακτήρων:

• [abc]: Αντιστοιχεί σε οποιονδήποτε από τους χαρακτήρες a, b ή c.
• [^abc]: Αντιστοιχεί σε οποιονδήποτε χαρακτήρα που *δεν* είναι a, b ή c.
• [a-z]: Αντιστοιχεί σε οποιοδήποτε πεζό γράμμα από το a έως το z.
• [A-Z]: Αντιστοιχεί σε οποιοδήποτε κεφαλαίο γράμμα από το A έως το Z.
• [0-9]: Αντιστοιχεί σε οποιοδήποτε ψηφίο από το 0 έως το 9.
• [a-zA-Z0-9]: Αντιστοιχεί σε οποιονδήποτε αλφαριθμητικό χαρακτήρα.
• \d: Αντιστοιχεί σε οποιοδήποτε ψηφίο (ισοδύναμο με το [0-9]).
• \D: Αντιστοιχεί σε οποιονδήποτε μη-ψηφιακό χαρακτήρα (ισοδύναμο με το [^0-9]).
• \w: Αντιστοιχεί σε οποιονδήποτε χαρακτήρα λέξης (αλφαριθμητικός συν την κάτω παύλα· ισοδύναμο με το [a-zA-Z0-9_]).
• \W: Αντιστοιχεί σε οποιονδήποτε μη-χαρακτήρα λέξης (ισοδύναμο με το [^a-zA-Z0-9_]).
• \s: Αντιστοιχεί σε οποιονδήποτε χαρακτήρα κενού (κενό, tab, νέα γραμμή, κ.λπ.).
• \S: Αντιστοιχεί σε οποιονδήποτε χαρακτήρα που δεν είναι κενό.

Ποσοδείκτες:

• *: Αντιστοιχεί στο προηγούμενο στοιχείο μηδέν ή περισσότερες φορές. Για παράδειγμα, το a* αντιστοιχεί σε "", "a", "aa", "aaa" και ούτω καθεξής.
• +: Αντιστοιχεί στο προηγούμενο στοιχείο μία ή περισσότερες φορές. Για παράδειγμα, το a+ αντιστοιχεί σε "a", "aa", "aaa", αλλά όχι σε "".
• ?: Αντιστοιχεί στο προηγούμενο στοιχείο μηδέν ή μία φορά. Για παράδειγμα, το a? αντιστοιχεί σε "" ή "a".
• {n}: Αντιστοιχεί στο προηγούμενο στοιχείο ακριβώς *n* φορές. Για παράδειγμα, το a{3} αντιστοιχεί σε "aaa".
• {n,}: Αντιστοιχεί στο προηγούμενο στοιχείο *n* ή περισσότερες φορές. Για παράδειγμα, το a{2,} αντιστοιχεί σε "aa", "aaa", "aaaa" και ούτω καθεξής.
• {n,m}: Αντιστοιχεί στο προηγούμενο στοιχείο μεταξύ *n* και *m* φορών (συμπεριλαμβανομένων). Για παράδειγμα, το a{2,4} αντιστοιχεί σε "aa", "aaa" ή "aaaa".

Άγκυρες:

• ^: Αντιστοιχεί στην αρχή της συμβολοσειράς. Για παράδειγμα, το ^Hello αντιστοιχεί σε συμβολοσειρές που *ξεκινούν* με "Hello".
• $: Αντιστοιχεί στο τέλος της συμβολοσειράς. Για παράδειγμα, το World$ αντιστοιχεί σε συμβολοσειρές που *τελειώνουν* με "World".
• \b: Αντιστοιχεί σε ένα όριο λέξης. Αυτή είναι η θέση μεταξύ ενός χαρακτήρα λέξης (\w) και ενός μη-χαρακτήρα λέξης (\W) ή στην αρχή ή στο τέλος της συμβολοσειράς. Για παράδειγμα, το \bword\b αντιστοιχεί σε ολόκληρη τη λέξη "word".

Σημαίες (Flags):

Οι σημαίες των regex τροποποιούν τη συμπεριφορά των κανονικών εκφράσεων. Προστίθενται στο τέλος του literal της regex ή περνούν ως δεύτερο όρισμα στον κατασκευαστή RegExp.

• g (global): Αντιστοιχεί σε όλες τις εμφανίσεις του προτύπου, όχι μόνο στην πρώτη.
• i (ignore case): Πραγματοποιεί αντιστοίχιση χωρίς διάκριση πεζών-κεφαλαίων.
• m (multiline): Ενεργοποιεί τη λειτουργία πολλαπλών γραμμών, όπου τα ^ και $ αντιστοιχούν στην αρχή και το τέλος κάθε γραμμής (που χωρίζεται με \n).
• s (dotAll): Επιτρέπει στην τελεία (.) να αντιστοιχεί και σε χαρακτήρες νέας γραμμής.
• u (unicode): Ενεργοποιεί την πλήρη υποστήριξη Unicode.
• y (sticky): Αντιστοιχεί μόνο από το δείκτη που υποδεικνύεται από την ιδιότητα lastIndex της regex.

Μέθοδοι Regex της JavaScript

Η JavaScript παρέχει αρκετές μεθόδους για την εργασία με κανονικές εκφράσεις:

• test(): Ελέγχει αν μια συμβολοσειρά αντιστοιχεί στο πρότυπο. Επιστρέφει true ή false.
• exec(): Εκτελεί μια αναζήτηση για μια αντιστοίχιση σε μια συμβολοσειρά. Επιστρέφει έναν πίνακα που περιέχει το αντιστοιχισμένο κείμενο και τις συλληφθείσες ομάδες, ή null αν δεν βρεθεί αντιστοίχιση.
• match(): Επιστρέφει έναν πίνακα που περιέχει τα αποτελέσματα της αντιστοίχισης μιας συμβολοσειράς με μια κανονική έκφραση. Συμπεριφέρεται διαφορετικά με και χωρίς τη σημαία g.
• search(): Ελέγχει για μια αντιστοίχιση σε μια συμβολοσειρά. Επιστρέφει τον δείκτη της πρώτης αντιστοίχισης, ή -1 αν δεν βρεθεί αντιστοίχιση.
• replace(): Αντικαθιστά τις εμφανίσεις ενός προτύπου με μια συμβολοσειρά αντικατάστασης ή μια συνάρτηση που επιστρέφει τη συμβολοσειρά αντικατάστασης.
• split(): Χωρίζει μια συμβολοσειρά σε έναν πίνακα υποσυμβολοσειρών βάσει μιας κανονικής έκφρασης.

Παραδείγματα Χρήσης Μεθόδων Regex:

// test()
const regex = /hello/;
const str = "hello world";
console.log(regex.test(str)); // Αποτέλεσμα: true

// exec()
const regex2 = /hello (\w+)/;
const str2 = "hello world";
const result = regex2.exec(str2);
console.log(result); // Αποτέλεσμα: ["hello world", "world", index: 0, input: "hello world", groups: undefined]

// match() με τη σημαία 'g'
const regex3 = /\d+/g; // Αντιστοιχεί σε ένα ή περισσότερα ψηφία καθολικά
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // Αποτέλεσμα: ["123", "456"]

// match() χωρίς τη σημαία 'g'
const regex4 = /\d+/;
const str4 = "There are 123 apples and 456 oranges.";
const match = str4.match(regex4);
console.log(match); // Αποτέλεσμα: ["123", index: 11, input: "There are 123 apples and 456 oranges.", groups: undefined]

// search()
const regex5 = /world/;
const str5 = "hello world";
console.log(str5.search(regex5)); // Αποτέλεσμα: 6

// replace()
const regex6 = /world/;
const str6 = "hello world";
const newStr = str6.replace(regex6, "JavaScript");
console.log(newStr); // Αποτέλεσμα: hello JavaScript

// replace() με μια συνάρτηση
const regex7 = /(\d+)-(\d+)-(\d+)/;
const str7 = "Today's date is 2023-10-27";
const newStr2 = str7.replace(regex7, (match, year, month, day) => {
  return `${day}/${month}/${year}`;
});
console.log(newStr2); // Αποτέλεσμα: Today's date is 27/10/2023

// split()
const regex8 = /, /;
const str8 = "apple, banana, cherry";
const arr = str8.split(regex8);
console.log(arr); // Αποτέλεσμα: ["apple", "banana", "cherry"]

Προηγμένες Τεχνικές Regex

Ομάδες Σύλληψης (Capturing Groups):

Οι παρενθέσεις () χρησιμοποιούνται για τη δημιουργία ομάδων σύλληψης στις κανονικές εκφράσεις. Οι συλληφθείσες ομάδες σας επιτρέπουν να εξάγετε συγκεκριμένα τμήματα του αντιστοιχισμένου κειμένου. Οι μέθοδοι exec() και match() επιστρέφουν έναν πίνακα όπου το πρώτο στοιχείο είναι ολόκληρη η αντιστοίχιση, και τα επόμενα στοιχεία είναι οι συλληφθείσες ομάδες.

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match[0]); // Αποτέλεσμα: 2023-10-27 (Ολόκληρη η αντιστοίχιση)
console.log(match[1]); // Αποτέλεσμα: 2023 (Η πρώτη ομάδα σύλληψης - έτος)
console.log(match[2]); // Αποτέλεσμα: 10 (Η δεύτερη ομάδα σύλληψης - μήνας)
console.log(match[3]); // Αποτέλεσμα: 27 (Η τρίτη ομάδα σύλληψης - ημέρα)

Ονομαστικές Ομάδες Σύλληψης (Named Capturing Groups):

Το ES2018 εισήγαγε τις ονομαστικές ομάδες σύλληψης, οι οποίες σας επιτρέπουν να δώσετε ονόματα στις ομάδες σύλληψης χρησιμοποιώντας τη σύνταξη (?...). Αυτό κάνει τον κώδικα πιο ευανάγνωστο και συντηρήσιμο.

const regex = /(?\d{4})-(?\d{2})-(?\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match.groups.year);  // Αποτέλεσμα: 2023
console.log(match.groups.month); // Αποτέλεσμα: 10
console.log(match.groups.day);   // Αποτέλεσμα: 27

Μη-Συλλεκτικές Ομάδες (Non-Capturing Groups):

Εάν χρειάζεται να ομαδοποιήσετε τμήματα μιας regex χωρίς να τα συλλάβετε (π.χ., για την εφαρμογή ενός ποσοδείκτη σε μια ομάδα), μπορείτε να χρησιμοποιήσετε μια μη-συλλεκτική ομάδα με τη σύνταξη (?:...). Αυτό αποφεύγει την περιττή δέσμευση μνήμης για τις συλληφθείσες ομάδες.

const regex = /(?:https?:\/\/)?([\w\.]+)/; // Αντιστοιχεί σε ένα URL αλλά συλλαμβάνει μόνο το όνομα τομέα
const url = "https://www.example.com/path";
const match = regex.exec(url);

console.log(match[1]); // Αποτέλεσμα: www.example.com

Lookarounds (Έλεγχοι Περιβάλλοντος):

Τα lookarounds είναι δηλώσεις μηδενικού πλάτους (zero-width assertions) που αντιστοιχούν σε μια θέση σε μια συμβολοσειρά με βάση ένα πρότυπο που προηγείται (lookbehind) ή ακολουθεί (lookahead) αυτή τη θέση, χωρίς να περιλαμβάνουν το ίδιο το πρότυπο του lookaround στην αντιστοίχιση.

• Θετικό Lookahead: (?=...) Αντιστοιχεί εάν το πρότυπο εντός του lookahead *ακολουθεί* την τρέχουσα θέση.
• Αρνητικό Lookahead: (?!...) Αντιστοιχεί εάν το πρότυπο εντός του lookahead *δεν ακολουθεί* την τρέχουσα θέση.
• Θετικό Lookbehind: (?<=...) Αντιστοιχεί εάν το πρότυπο εντός του lookbehind *προηγείται* της τρέχουσας θέσης.
• Αρνητικό Lookbehind: (? Αντιστοιχεί εάν το πρότυπο εντός του lookbehind *δεν προηγείται* της τρέχουσας θέσης.

// Θετικό Lookahead: Λήψη της τιμής μόνο όταν ακολουθείται από USD
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // Αποτέλεσμα: ["100"]

// Αρνητικό Lookahead: Λήψη της λέξης μόνο όταν δεν ακολουθείται από αριθμό
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // Αποτέλεσμα: null επειδή η match() επιστρέφει μόνο την πρώτη αντιστοίχιση χωρίς τη σημαία 'g', κάτι που δεν χρειαζόμαστε.
// για να το διορθώσουμε:
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "apple 123 banana orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // Αποτέλεσμα: [ 'banana' ]

// Θετικό Lookbehind: Λήψη της τιμής μόνο όταν προηγείται το $
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // Αποτέλεσμα: ["200"]

// Αρνητικό Lookbehind: Λήψη της λέξης μόνο όταν δεν προηγείται η λέξη 'not'
const regex5 = /(?

const regex = /([a-z]+) \1/;
const text = "hello hello world";
const match = regex.exec(text);
console.log(match); // Αποτέλεσμα: ["hello hello", "hello", index: 0, input: "hello hello world", groups: undefined]

const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

console.log(emailRegex.test("test@example.com"));    // Αποτέλεσμα: true
console.log(emailRegex.test("invalid-email"));       // Αποτέλεσμα: false
console.log(emailRegex.test("test@sub.example.co.uk")); // Αποτέλεσμα: true

const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
const text = "Visit our website at https://www.example.com or check out http://blog.example.org.";
const urls = text.match(urlRegex);
console.log(urls); // Αποτέλεσμα: ["https://www.example.com", "http://blog.example.org"]

const csvString = 'John,Doe,"123, Main St",New York';
const csvRegex = /(?:"([^"]*(?:""[^"]*)*)")|([^,]+)/g; //Διορθωμένη regex για CSV
let values = [];
let match;  

while (match = csvRegex.exec(csvString)) {
  values.push(match[1] ? match[1].replace(/""/g, '"') : match[2]);
}


console.log(values); // Αποτέλεσμα: ["John", "Doe", "123, Main St", "New York"]

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // Αποτέλεσμα: true (Παράδειγμα ΗΠΑ)
console.log(phoneRegex.test("+44 20 7946 0500")); // Αποτέλεσμα: true (Παράδειγμα ΗΒ)
console.log(phoneRegex.test("+81 3 3224 5000"));  // Αποτέλεσμα: true (Παράδειγμα Ιαπωνίας)
console.log(phoneRegex.test("123-456-7890"));   // Αποτέλεσμα: false

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

console.log(passwordRegex.test("P@ssword123")); // Αποτέλεσμα: true
console.log(passwordRegex.test("password"));       // Αποτέλεσμα: false (χωρίς κεφαλαία ή αριθμό)
console.log(passwordRegex.test("Password"));       // Αποτέλεσμα: false (χωρίς αριθμό)
console.log(passwordRegex.test("Pass123"));        // Αποτέλεσμα: false (χωρίς πεζά)
console.log(passwordRegex.test("P@ss1"));          // Αποτέλεσμα: false (λιγότεροι από 8 χαρακτήρες)