Κανονικές εκφράσεις στη JavaScript
Μια κανονική έκφραση (ή regex) είναι μια ακολουθία χαρακτήρων που μπορούμε να χρησιμοποιήσουμε για να στοχεύσουμε και να χειριστούμε συγκεκριμένα στοιχεία μέσα σε συμβολοσειρές. Έτσι, μπορούμε:
- Να αναζητήσουμε ένα κείμενο μέσα σε μια συμβολοσειρά
- Να αντικαταστήσουμε υποσυμβολοσειρές σε μια συμβολοσειρά
- Να εξαγάγουμε πληροφορίες από μια συμβολοσειρά
💡 Η γεύση regex της JavaScript είναι μέρος του προτύπου ECMA-262 για τη γλώσσα. Αυτό σημαίνει ότι δεν χρειάζεται να ανησυχείς για συμβατότητα με συγκεκριμένους browser.
Πώς να δημιουργήσεις κανονικές εκφράσεις
Στη JavaScript, μια κανονική έκφραση γράφεται συνήθως στη μορφή /pattern/modifiers.
Υπάρχουν δύο τρόποι για να δημιουργήσεις μια κανονική έκφραση:
-
Κυριολεκτικό κανονικής έκφρασης:
const regex = /[a-z]/;
- Κατασκευαστής RegExp:
const regex = new RegExp('[a-z]');
Και στις δύο περιπτώσεις, η JavaScript δημιουργεί ένα αντικείμενο από την κανονική έκφραση. Συνιστάται να χρησιμοποιείς αμετάβλητα μοτίβα με το κυριολεκτικό ως προεπιλογή.
Ο κατασκευαστής RegExp μπορεί να χρησιμοποιηθεί σε περιπτώσεις όπου η κανονική έκφραση θα αλλάξει ή δεν τη γνωρίζουμε ακόμη (όπως μια είσοδο).
🏴☠️ Σημαίες
Οι κανονικές εκφράσεις έχουν προαιρετικές υπερδυνάμεις που ονομάζονται flags και επιτρέπουν επιπλέον λειτουργίες.
Μερικές από τις πιο διαδεδομένες είναι:
-
/g - Καθολική αναζήτηση
-
/i - Χωρίς διάκριση πεζών-κεφαλαίων
-
/m - Αναζήτηση σε πολλές γραμμές
Ορίστε ένα απλό παράδειγμα:
const re = /home/gi;
const str = 'Home, sweet home.';
const myArray = str.match(re);
console.log(myArray);
=> // ["Home", "home"]
Ο χαρακτήρας g μάς επιτρέπει να εντοπίσουμε όλες τις πιθανές αντιστοιχίσεις μέσα σε μια συμβολοσειρά. Χωρίς αυτή τη δυνατότητα, η JavaScript θα είχε εξαγάγει μόνο την πρώτη αντιστοίχιση Home.
Η σημαία /i χωρίς διάκριση πεζών-κεφαλαίων μάς επιτρέπει να είμαστε ευέλικτοι όταν ψάχνουμε ένα μοτίβο. Έτσι, δεν έχει σημασία αν αυτό που ψάχνουμε είναι σε UPPERCASE ή lowercase.
Όταν χρησιμοποιείς τον κατασκευαστή RegExp, η σύνταξη για την προσθήκη σημαιών είναι διαφορετική.
let regex = /[a-z]/gi; // literal notation
let regex = new RegExp('[a-z]', 'gi'); // constructor with string pattern as first argument
let regex = new RegExp(/[a-z]/, 'gi'); // constructor with regular expression literal as first argument (Starting with ECMAScript 6)
Οι πιο συνηθισμένες συναρτήσεις
Όταν οι κανονικές εκφράσεις συνδυάζονται με τις ενσωματωμένες συναρτήσεις της JavaScript, έχουμε ισχυρούς τρόπους να χειριζόμαστε και να αντλούμε δεδομένα από συμβολοσειρές.
Αυτές είναι μερικές από τις πιο συνηθισμένες συναρτήσεις που χρησιμοποιούνται μαζί με regex.
Test
Η μέθοδος test() εκτελεί αναζήτηση για αντιστοίχιση μεταξύ μιας κανονικής έκφρασης και μιας συγκεκριμένης συμβολοσειράς. Επιστρέφει αληθής ή ψευδής.
const str = 'It is difficult to test if you have a virus';
const result = /virus$/.test(str);
console.log(result);
// => true
Match
Με τη μέθοδο match() παίρνουμε έναν χρήσιμο πίνακα του οποίου τα περιεχόμενα εξαρτώνται από την παρουσία ή την απουσία των αντιστοιχίσεων που βρέθηκαν.
Έτσι, μπορούμε και να αναζητήσουμε και να εξαγάγουμε πληροφορίες από οποιαδήποτε συμβολοσειρά. Για παράδειγμα:
const funnyQuote =
'If you see someone crying, ask if it is because of their haircut.';
const regex1 = /someone/;
const regex2 = /happy/;
funnyQuote.match(regex1);
// => ["someone", index: 11, input: "If you see someone crying, ask if it is because of their haircut.", groups: undefined]
funnyQuote.match(regex2);
// => null
Όταν υπάρχει η σημαία καθολικής αναζήτησης /g, αντί να πάρουμε μόνο τη μία αντιστοίχιση μαζί με χρήσιμες πληροφορίες όπως η θέση ή η είσοδος, η μέθοδος επιστρέφει όλες τις εμφανίσεις που προβάλλονται στον πίνακα:
const funnyQuote =
'If you see someone crying, ask if it is because of their haircut.';
const regex3 = /if/gi;
funnyQuote.match(regex3);
// => ["If", "if"];
Replace
Η μέθοδος replace() στη JavaScript μάς επιτρέπει να αναζητήσουμε μια τιμή μέσα σε μια δεδομένη συμβολοσειρά και να την αντικαταστήσουμε με μια επιθυμητή νέα τιμή.
string.replace(searchValue, newValue);
Το μοτίβο για την αναζήτηση της αντικατάστασης μπορεί να είναι μία μόνο συμβολοσειρά ή μια κανονική έκφραση.
let string = 'I like dogs!';
let result = string.replace('dogs', 'cats');
let string = 'I would love to travel to Japan';
let result = string.replace(/Japan/g, 'Hawaii');
Επιπλέον, μπορούμε να εφαρμόσουμε μια συνάρτηση στη θέση αντικατάστασης για να κάνουμε επιπλέον αλλαγές σε κάθε τιμή.
let text = 'Say hello to the chatbot.';
let result = text.replace(/chatbot|hello/gi, function (word) {
return word.toUpperCase();
});
// => "Say HELLO to the CHATBOT"
Split
Η μέθοδος split() στη JavaScript αποτελεί έναν διαφορετικό τρόπο χρήσης και χειρισμού συμβολοσειρών με κανονικές εκφράσεις.
Έτσι, θα χρησιμοποιήσουμε regex για να χωρίσουμε μια δεδομένη συμβολοσειρά αναγνωρίζοντας ένα μοτίβο, π.χ. str.split(/[,.\s]/). Αυτό το μοτίβο θα χρησιμοποιηθεί ως separator.
const str = 'hello,user.how are.you';
const result = str.split(/[,.\s]/);
console.log(result);
// => ['hello', 'user', 'how', 'are', 'you']
Άσκηση εκμάθησης
