Articles
Pengenalan kepada JavaScript
`RegExp` Objekt

`RegExp` Objekt

Artikel ini menerangkan objek RegExp.

Kami akan menerangkan objek RegExp dengan contoh praktikal.

YouTube Video

RegExp Objekt

Apa itu RegExp?

RegExp (Regular Expression) ialah objek yang digunakan untuk mewakili corak rentetan. Tidak seperti perbandingan aksara yang mudah, anda boleh menentukan 'rentetan yang memenuhi syarat tertentu' dengan lebih fleksibel.

Dengan menggunakan objek RegExp, anda boleh melakukan operasi seperti mencari, mengesahkan, mengekstrak, dan menggantikan rentetan dengan ringkas dan jelas. Ia sangat berkesan untuk tugas harian seperti pengesahan input borang, analisis log, dan pemformatan teks. Di bawah adalah beberapa contoh mudah ungkapan biasa (regular expressions).

1const pattern = /abc/;
  • Ekspresi regular ini menyemak sama ada urutan 'abc' disertakan.

Cara Mewujudkan Ekspresi Regular (Dua Kaedah)

Terdapat dua jenis sintaks RegExp: notasi literal dan notasi konstruktor.

1// Literal notation: pattern and flags are written together
2const literal         = /hello/;
3const literalWithFlag = /hello/i;
4const literalDigits   = /\d+/;
5
6// Constructor notation: pattern and flags are passed separately
7const constructor         = new RegExp("hello");
8const constructorWithFlag = new RegExp("hello", "i");
9const constructorDigits   = new RegExp("\\d+");
  • Notasi literal adalah ringkas dan mudah dibaca, menjadikannya sesuai untuk ekspresi reguler yang digunakan sebagai pemalar.. Sebaliknya, notasi konstruktor digunakan apabila anda ingin membina corak menggunakan pembolehubah atau menentukan kandungannya ketika waktu jalan.
  • Dengan notasi literal, anda boleh menerangkan ekspresi reguler dan benderanya secara intuitif bersama-sama. Sebaliknya, dengan notasi konstruktor, anda perlu menentukan corak dan bendera secara berasingan.
  • Selain itu, dengan notasi konstruktor, anda meluluskan ekspresi reguler sebagai rentetan, jadi garis miring terbalik mesti dilarikan dua kali.

test(): Pengesahan Paling Asas

Objek RegExp menyediakan kaedah untuk melakukan penilaian dan operasi menggunakan ungkapan biasa. test() ialah kaedah yang mengembalikan boolean yang menunjukkan sama ada corak sepadan.

1const regex = /JavaScript/;
2
3console.log(regex.test("I love JavaScript")); // true
4console.log(regex.test("I love TypeScript")); // false
  • Ia adalah kaedah pertama yang perlu anda pelajari, dan ia sangat sesuai untuk percabangan bersyarat atau pengesahan input.

match(): Dapatkan Hasil Padanan

match() mengembalikan array yang mengandungi rentetan yang dipadankan dan maklumat terperinci.

1const text = "Version 1.2.3";
2const result = text.match(/\d+\.\d+\.\d+/);
3
4console.log(result[0]); // "1.2.3"
  • match() lebih sesuai digunakan berbanding test() untuk proses pengekstrakan dan penguraian.

replace(): Mengganti Menggunakan Ekspresi Regular

replace() menukar bahagian yang dipadankan kepada rentetan lain.

1const text = "Hello   World";
2const result = text.replace(/\s+/g, " ");
3
4console.log(result); // "Hello World"
  • Anda boleh menggunakannya untuk pemformatan log atau menormalkan ruang kosong yang tidak perlu.

Asas Penanda (g, i, m)

Anda boleh menetapkan 'bendera' (flags) dalam ungkapan biasa. Bendera ialah pilihan yang mengawal bagaimana ungkapan biasa memproses rentetan mengikut peraturan tertentu. Walaupun dengan pola yang sama, hasilnya boleh berubah bergantung kepada bendera yang digunakan.

1const text = "apple Apple APPLE";
2const regex = /apple/gi;        // or new RegExp("apple", "gi");
3
4console.log(text.match(regex)); // ["apple", "Apple", "APPLE"]
  • Bendera g (global) akan mencari di seluruh rentetan.
  • Bendera i (abaikan kes) akan mengabaikan perbezaan huruf besar dan kecil semasa pemadanan.
1const multilineText = `apple
2banana
3apple`;
4
5const regexM = /^apple/gm;
6
7console.log(multilineText.match(regexM)); // ["apple", "apple"]
  • Bendera m (multiline) digunakan untuk mengendalikan rentetan berbilang baris berdasarkan setiap baris. Dengan ini, ^ dan $ berfungsi berdasarkan permulaan atau akhir setiap baris, bukan seluruh rentetan.

Kelas Aksara: Gabungkan Beberapa Calon

Dengan menggunakan petak kurungan [], anda boleh menentukan satu set aksara yang mungkin bagi satu kedudukan.

1const regex = /gr[ae]y/;
2
3console.log(regex.test("gray")); // true
4console.log(regex.test("grey")); // true
  • Ini berguna untuk menampung variasi ejaan dan alternatif yang mudah.

Metakarekter: Jalan Pintas Lazim

Metakarakter ialah simbol yang membolehkan anda menulis corak yang biasa digunakan dalam bentuk yang lebih ringkas.

1const regex = /\d{4}-\d{2}-\d{2}/;  // or new RegExp("\\d{4}-\\d{2}-\\d{2}");
2
3console.log(regex.test("2025-12-29")); // true
  • \d bermaksud nombor, dan {n} menentukan bilangan pengulangan.

^ dan $: Sahkan Seluruh Rentetan

^ dan $ mewakili permulaan dan penghujung rentetan.

1const regex = /^\d+$/;
2
3console.log(regex.test("123"));   // true
4console.log(regex.test("123a"));  // false
  • Ia penting dalam situasi di mana padanan tepat diperlukan, seperti input borang.

Pengelompokan dan Penangkapan

Dengan menggunakan kurungan (), anda boleh mengekstrak nilai sebahagian.

1const text = "2025/12/29";
2const regex = /(\d{4})\/(\d{2})\/(\d{2})/;
3const [, year, month, day] = text.match(regex);
4
5console.log(year, month, day); // 2025 12 29
  • Ia kerap digunakan untuk menguraikan tarikh dan struktur rentetan yang teratur.

Kesilapan Umum dan Perkara Penting

Ekspresi regular sangat berkuasa, tetapi cenderung untuk menjadi sukar untuk dibaca.

1// Hard to read
2const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+$/;
  • Jika ia menjadi terlalu rumit, anda boleh mempertimbangkan untuk menambah ulasan, membahagikan ungkapan, atau mengubah semula prosesnya.

Ringkasan

RegExp ialah ciri asas penting dalam JavaScript untuk menerangkan pemprosesan rentetan secara ringkas dan tepat. Anda tidak perlu mempelajari ekspresi regular yang rumit dari awal; yang penting ialah menggunakan kaedah dan sintaks asas seperti test, match, dan replace mengikut keperluan praktikal anda. Jika anda boleh menganggap ekspresi regular bukan sebagai 'pengetahuan istimewa' tetapi sebagai 'alat untuk mewakili corak secara teratur', anda akan meningkatkan kualiti dan keterbacaan pengesahan input serta pemprosesan teks dengan ketara.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Objek `Date`