Ekspresi biasa, sering disingkat sebagai regex, adalah alat yang kuat untuk pencocokan corak dan manipulasi teks. Di JavaScript, anda boleh membuat dan menggunakan ungkapan biasa dalam beberapa cara:
Membuat ungkapan biasa :
let regex = /pattern/;
RegExp
: let regex = new RegExp('pattern');
Kaedah ini berguna apabila anda perlu membina corak regex secara dinamik.Penggunaan Asas :
test()
: let result = /pattern/.test('string');
exec()
: let match = /pattern/.exec('string');
replace()
: let replaced = 'string'.replace(/pattern/, 'replacement');
Bendera : Regex Flags mengubah suai tingkah laku corak. Bendera biasa di JavaScript termasuk:
g
: Carian global, mendapati semua perlawanan dan bukannya berhenti selepas perlawanan pertama.i
: Cari kes-insensitif.m
: Carian multiline, merawat aksara permulaan dan akhir (^ dan $) sebagai bekerja melalui pelbagai baris.Kelas watak dan kuantifi :
[abc]
untuk memadankan mana -mana aksara tertutup, atau [^abc]
untuk memadankan mana -mana watak kecuali yang tertutup.*
,
, ?
, dan {n,m}
membolehkan anda menentukan berapa kali watak atau kumpulan harus berlaku.Kumpulan dan menangkap :
()
untuk membuat kumpulan, yang boleh digunakan untuk menangkap bahagian perlawanan. Anda boleh merujuk kumpulan yang ditangkap dalam penggantian atau perlawanan selanjutnya menggunakan $1
, $2
, dll.Inilah contoh praktikal:
<code class="javascript">let emailPattern = /^[a-zA-Z0-9._-] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,4}$/; let testEmail = "example@email.com"; if (emailPattern.test(testEmail)) { console.log("Valid email"); } else { console.log("Invalid email"); }</code>
Contoh ini menggunakan regex untuk mengesahkan alamat e -mel. Corak memastikan bahawa rentetan bermula dengan satu atau lebih aksara alfanumerik, tempoh, garis bawah, atau tanda hubung, diikuti dengan simbol @, dan kemudian lebih banyak aksara abjad angka yang berakhir dengan akhiran domain.
Menggunakan Regex dengan berkesan memerlukan perhatian yang teliti untuk mengelakkan kesilapan yang sama:
Greedy vs. Non-Greedy Quantifiers :
*
dan
adalah tamak, bermakna mereka sepadan dengan teks sebanyak mungkin. Gunakan .*?
bukannya .*
Untuk membuat kuantifi tidak dibebankan dan sepadan dengan jumlah teks yang mungkin.Meninggalkan watak khas :
.
, *
,
, ?
, {
, }
, (
, )
, [
, ]
, ^
, $
, |
, dan \
mempunyai makna khas dalam regex. Untuk memadankan mereka secara harfiah, anda mesti melarikan diri dengan backslash \
di dalam corak regex.Masalah Prestasi :
Penggunaan sauh yang tidak betul :
^
dan $
sauh sepadan dengan permulaan dan akhir rentetan (atau garis jika bendera m
digunakan). Menyalahgunakan ini boleh membawa kepada perlawanan atau kegagalan yang tidak dijangka.Menghadapi Sensitiviti Kes :
i
, corak regex adalah sensitif kes. Ingatlah untuk memasukkan bendera ini jika anda memerlukan padanan kes-tidak sensitif.Tidak menguji dengan teliti :
Beberapa alat dan perpustakaan dapat meningkatkan fungsi regex anda dalam JavaScript:
Xregexp :
RegExp
terbina dalam. Ia menyokong ciri -ciri seperti kumpulan penangkapan yang dinamakan, sifat Unicode, dan banyak lagi.Regexr :
Regex101 :
Regex-Generator :
Debuggex :
Menguji dan menyahpepijat corak regex dengan berkesan melibatkan menggunakan gabungan teknik dan alat:
Ujian Konsol :
console.log()
untuk melihat hasil test()
, exec()
, dan replace()
operasi.<code class="javascript">let pattern = /hello/; console.log(pattern.test("hello world")); // true console.log(pattern.exec("hello world")); // ["hello", index: 0, input: "hello world", groups: undefined]</code>
Penguji Regex dalam talian :
Sokongan Persekitaran Pembangunan Bersepadu (IDE) :
Ujian Unit Menulis :
<code class="javascript">describe('Email Validation Regex', () => { let emailPattern = /^[a-zA-Z0-9._-] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,4}$/; it('should validate correct email', () => { expect(emailPattern.test('example@email.com')).toBe(true); }); it('should reject incorrect email', () => { expect(emailPattern.test('example')).toBe(false); }); });</code>
Hasil pertengahan pembalakan :
console.log()
pada langkah -langkah yang berbeza untuk melihat bahagian -bahagian rentetan yang ditangkap.Dengan menggabungkan kaedah ini, anda boleh menguji dan menyahpepijat corak regex anda dengan berkesan dalam persekitaran JavaScript, memastikan mereka bekerja seperti yang dimaksudkan dan cekap.
Atas ialah kandungan terperinci Bagaimanakah saya menggunakan ungkapan biasa dengan berkesan dalam javascript untuk pemadanan corak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!