Περικοπή κειμένου είναι μια κοινή εργασία στην ανάπτυξη ιστού, ειδικά όταν έχουμε να κάνουμε με μακροσκελές περιεχόμενο κειμένου που πρέπει να χωράει σε ορισμένα όρια παρουσίασης χωρίς να υπερφορτώνει την προβολή. Αυτό συμβαίνει συνήθως σε σενάρια όπως ροές ειδήσεων, προεπισκοπήσεις κειμένου ή οπουδήποτε μπορείτε να επιλέξετε μια λειτουργία τύπου «διαβάστε περισσότερα».
Προσέγγιση του Προβλήματος Περικοπής
Για να περικόψουμε κείμενο σε JavaScript, υπάρχουν μερικές διαφορετικές μέθοδοι που μπορούμε να χρησιμοποιήσουμε, είτε χρησιμοποιώντας καθαρή JavaScript είτε χρησιμοποιώντας βιβλιοθήκες όπως το Lodash, καθεμία με τη δική της προσέγγιση και θεωρήσεις περιπτώσεων χρήσης.
Το κλειδί σε όλες αυτές τις προσεγγίσεις είναι το substring() μέθοδος. Αυτή η μέθοδος επιστρέφει το τμήμα της συμβολοσειράς μεταξύ των ευρετηρίων έναρξης και τέλους ή στο τέλος της συμβολοσειράς.
let str = "Hello world!"; let res = str.substring(1, 4);
Σε αυτόν τον κώδικα JavaScript, δημιουργούμε μια συμβολοσειρά που λέει "Hello world!" και στη συνέχεια χρησιμοποιώντας τη μέθοδο substring για να επιστρέψετε ένα τμήμα του. Σε αυτήν την περίπτωση, το res θα είναι "ell".
Βήμα-Βήμα Εξήγηση
Ας δημιουργήσουμε μια συνάρτηση JavaScript για να περικόψουμε ένα δεδομένο κομμάτι κειμένου σε ένα καθορισμένο μήκος:
function truncateString(str, num) {
if (str.length <= num) {
return str
}
return str.slice(0, num > 3 ? num - 3 : num) + '...'
}
Εδώ είναι πώς αυτό λειτουργεί:
- Η συνάρτηση παίρνει δύο παραμέτρους: τη συμβολοσειρά και το μέγιστο μήκος της περικομμένης συμβολοσειράς.
- Εάν το μήκος της συμβολοσειράς είναι μικρότερο ή ίσο με το μέγιστο μήκος, η συνάρτηση θα επιστρέψει την αρχική συμβολοσειρά. Αυτό σημαίνει ότι εάν η συμβολοσειρά μας είναι μικρότερη από το μήκος που θέλουμε να περικόψουμε, δεν θα περικοπεί καθόλου.
- Εάν η συμβολοσειρά είναι μεγαλύτερη, η συνάρτηση θα την κόψει σε φέτες. Εάν το μέγιστο μήκος είναι μεγαλύτερο από 3, θα κόψει τη συμβολοσειρά στο (μήκος – 3) και στη συνέχεια θα προσθέσει «…» στο τέλος.
Χρήση Βιβλιοθηκών
Ενώ οι εγγενείς λειτουργίες JavaScript παρέχουν μια σταθερή και γρήγορη λύση για την περικοπή κειμένου, υπάρχουν επίσης αρκετές βιβλιοθήκες που μπορείτε να χρησιμοποιήσετε για να επιτύχετε παρόμοια αποτελέσματα.
Μια τέτοια βιβλιοθήκη είναι η Lodash, η οποία περιλαμβάνει α κολοβός λειτουργία. Η λειτουργία περικοπής του Lodash είναι λίγο πιο περίπλοκη, επιτρέποντάς σας να καθορίσετε το μήκος της περικοπής, τους χαρακτήρες τέλους και ακόμη και να διατηρήσετε ολόκληρες λέξεις.
_.truncate('this is some long text', {
'length': 10,
'separator': ' '
});
// => 'this is...'
Σε αυτό το παράδειγμα, η συνάρτηση περικοπής του Lodash χρησιμοποιείται για την περικοπή μιας συμβολοσειράς μετά από συγκεκριμένο αριθμό χαρακτήρων, διασφαλίζοντας παράλληλα ότι οι λέξεις δεν κόβονται στη μέση. Αυτό ανοίγει περισσότερες επιλογές για προσαρμογή και έλεγχο του τρόπου περικοπής του κειμένου σας.
Συνολικά, η περικοπή κειμένου σε JavaScript μπορεί να επιτευχθεί με διάφορα μέσα, καθένα από τα οποία προσφέρει διαφορετικό επίπεδο προσαρμογής και πολυπλοκότητας και η μέθοδος που θα επιλέξετε εξαρτάται τελικά από τις ανάγκες του έργου σας. Το βασικό είναι να θυμάστε ότι όποια μέθοδος κι αν επιλέξετε, βεβαιωθείτε ότι ταιριάζει καλύτερα στην εμπειρία χρήστη και στη συνολική διάταξη και σχεδιασμό της ιστοσελίδας.
