Cara cepat memulai dengan VUE3.0: Masuk ke pembelajaran
Rekomendasi terkait: Tutorial JavaScript
reguler ( Ekspresi Reguler, disebut sebagai regexp )
Aplikasi: Dalam pengembangan proyek, fungsi seperti menyembunyikan digit nomor ponsel tertentu, pengumpulan data, memfilter kata-kata sensitif, dan verifikasi formulir semuanya dapat diimplementasikan menggunakan ekspresi reguler.
Bidang yang berlaku: Dalam sistem operasi (Unix, Linux, dll.), bahasa pemrograman (C, C++, Java, PHP, Python, JavaScript, dll.).
Misalnya: Ambil pencarian teks sebagai contoh. Jika Anda menemukan string yang cocok dengan fitur tertentu (seperti nomor ponsel) dalam sejumlah besar teks, tulis fitur ini sesuai dengan sintaks ekspresi reguler untuk membentuk a pola yang dikenali oleh program komputer ( Pola), dan kemudian program komputer akan mencocokkan teks menurut pola ini untuk menemukan string yang memenuhi aturan.
Sejarah ekspresi reguler
Bentuk ekspresi ekspresi reguler
Selama pengembangan, sering kali diperlukan pencarian dan pencocokan string tertentu berdasarkan pola pencocokan reguler.
Selain mengambil nilai yang ditentukan dalam string, metode match() di objek String juga dapat mencocokkan semua konten yang memenuhi persyaratan dalam string target sesuai dengan aturan reguler, dan menyimpannya ke array setelah pertandingan berhasil. , mengembalikan false jika pertandingan gagal.
Dalam aplikasi JavaScript, Anda harus membuat objek reguler terlebih dahulu sebelum menggunakan ekspresi reguler. Selain pembuatan literal yang dijelaskan sebelumnya, dapat juga dibuat melalui konstruktor objek RegExp.
Agar pembaca lebih memahami perolehan benda biasa, penjelasan komparatif akan diberikan dengan mengambil pencocokan karakter khusus "^", "$", "*", "." dan "" sebagai contoh .
Perhatikan bahwa
meskipun objek biasa yang dibuat oleh metode konstruktor dan metode literal memiliki fungsi yang sepenuhnya identik, keduanya memiliki perbedaan tertentu dalam implementasi sintaksis. Pola sebelumnya harus menghindari garis miring terbalik () saat digunakan. Saat menulis pola terakhir, itu harus ditempatkan di dalam pembatas "/", dan tag bendera harus ditempatkan di luar pembatas akhir.
Manfaat: Penggunaan kategori karakter secara efektif dapat membuat ekspresi reguler lebih ringkas dan mudah dibaca.
Contoh 1: Huruf besar, huruf kecil, dan angka dapat direpresentasikan langsung menggunakan "w".
Kasus 2: Jika Anda ingin mencocokkan angka antara 0 dan 9, Anda dapat menggunakan "d".
Untuk memudahkan pemahaman pembaca tentang penggunaan kategori karakter, berikut ini penggunaan "." dan "s" sebagai contoh demonstrasi.
Representasi kumpulan karakter: "[]" dapat mengimplementasikan kumpulan karakter.
Rentang karakter: Jika digunakan bersama dengan tanda hubung "-", artinya mencocokkan karakter dalam rentang yang ditentukan.
Karakter antonim: Jika metakarakter "^" digunakan bersama dengan "[]", maka disebut karakter antonim.
Tidak dalam rentang tertentu: "^" digunakan bersama dengan "[]" untuk mencocokkan karakter yang tidak berada dalam rentang karakter yang ditentukan.
Ambil string 'get好TB6'.match(/pattern/g) sebagai contoh untuk menunjukkan penggunaan umum.
Perhatikan
bahwa karakter "-" biasanya hanya mewakili karakter biasa dan hanya
digunakan sebagai metakarakter ketika mewakili rentang karakter. Rentang yang diwakili oleh tanda hubung "-" mengikuti urutan pengkodean karakter. Misalnya, "aZ", "za", dan "a-9" semuanya merupakan rentang ilegal.
[Kasus] Batasi konten masukan
Ide implementasi kode :
Tulis HTML, atur kotak teks untuk tahun (tahun) dan bulan (bulan), dan tombol kueri.
Dapatkan objek elemen operasi dan verifikasi penyerahan formulir.
Verifikasi tahunnya, formulir biasa: /^d{4}/. Verifikasi bulannya, aturan reguler: / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /.
Kotak teks mendapat fokus dan warna kotak perintah dihilangkan. Kotak teks kehilangan fokus, menghilangkan spasi di kedua ujung konten masukan, dan memvalidasi.
Implementasi kode
<!DOCTYPEhtml>
<html>
<kepala>
<meta charset="UTF-8">
<title>Batasi konten masukan</title>
<gaya>
masukan[tipe=teks]{lebar: 40px;warna batas: #bbb;tinggi: 25px;ukuran font: 14px;radius batas: 2px;garis besar: 0;batas: #ccc 1px solid;padding: 0 10px; -webkit-transition: box-shadow .5s;margin-bottom: 15px;}
input[type=text]:hover, input[type=text]:fokus,input[type=submit]:hover{border: 1px solid #56b4ef; .05),0 0 8px rgba(82.168.236,.6); -webkit-transisi: bayangan kotak .5s;}
masukan::-webkit-input-placeholder {warna: #999; -webkit-transisi: warna .5s;}
masukan:fokus::-webkit-input-placeholder, masukan:hover::-webkit-input-placeholder {warna: #c2c2c2; -webkit-transisi: warna .5s;}
masukan[type=kirim]{tinggi: 30px; lebar: 80px; latar belakang: #4393C9; batas:1px solid #fff;warna: #fff;font:14px lebih tebal;
</gaya>
</kepala>
<tubuh>
<formulir id="formulir">
Tahun<input type="text" name="tahun">
Bulan<input type="text" name="bulan">
<input type="kirim" value="kueri">
</bentuk>
<p id="hasil"></p>
<skrip>
fungsi pemeriksaanTahun(obj) {
if (!obj.value.match(/^d{4}$/)) {
obj.style.borderColor = 'merah';
result.innerHTML = 'Input error, tahun diwakili oleh 4 digit';
kembali salah;
}
hasil.innerHTML = '';
kembali benar;
}
fungsi checkBulan(obj) {
if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
obj.style.borderColor = 'merah';
result.innerHTML = 'Input error, bulan antara 1 dan 12';
kembali salah;
}
hasil.innerHTML = '';
kembali benar;
}
var form = document.getElementById('form'); // <form> objek elemen var hasil = document.getElementById('result'); // <p> objek elemen var inputs = document.getElementsByTagName('input'); // <input> formulir pengumpulan elemen.onsubmit = function() {
return checkYear(inputs.year) && checkMonth(inputs.month);
};
input.tahun.onfocus = fungsi() {
this.style.borderColor = '';
};
input.bulan.onfocus = fungsi() {
this.style.borderColor = '';
};
if (!String.prototipe.trim) {
String.prototipe.trim = fungsi() {
kembalikan ini.ganti(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, '');
// uFEFF tanda urutan byte; xA0 tidak membungkus spasi };
}
input.tahun.onblur = function() {
ini.nilai = ini.nilai.trim();
periksaTahun(ini);
};
input.bulan.onblur = function() {
ini.nilai = ini.nilai.trim();
periksaBulan(ini);
};
</skrip>
</tubuh>
</html> : mendeteksi apakah ekspresi reguler cocok dengan string yang ditentukan.
Ketika pencocokan berhasil, nilai kembalian dari metode test() adalah benar, jika tidak maka akan mengembalikan salah.
Mendeteksi pengubah pola objek reguler
Ada juga beberapa properti di kelas RegExp yang digunakan untuk mendeteksi pengubah pola yang digunakan oleh objek reguler saat ini dan menentukan indeks awal kecocokan berikutnya.
Agar pembaca lebih memahami penggunaan atribut-atribut tersebut, berikut ini penggunaan pencocokan spasi sebagai contoh untuk mendemonstrasikannya.
: dapat mengembalikan posisi di mana substring dari pola yang ditentukan pertama kali muncul dalam string. Metode ini lebih kuat daripada metode indexOf().
metode split() : digunakan untuk membagi string menjadi array string berdasarkan pembatas yang ditentukan. Array string terpisah tidak menyertakan pembatas.
Jika terdapat lebih dari satu pembatas, objek reguler perlu didefinisikan untuk menyelesaikan operasi pemisahan string.
Perhatikan bahwa
ketika string kosong, metode split() mengembalikan array "[""]" yang berisi string kosong. Jika string dan pembatas keduanya adalah string kosong, array kosong "[] dikembalikan. ".
Verifikasi kekuatan kata sandi
langsung
Kondisi verifikasi kekuatan kata sandi:
① Panjang <6 digit, tidak ada kekuatan kata sandi.
②Panjangnya >6 karakter dan berisi salah satu angka, huruf, atau karakter lain, dan kekuatan kata sandinya "rendah".
③Panjangnya >6 karakter dan berisi dua jenis angka, huruf, atau karakter lainnya. Kekuatan kata sandinya adalah "sedang".
④ Jika panjangnya >6 karakter dan berisi tiga atau lebih jenis angka, huruf, atau karakter lainnya, kekuatan kata sandinya adalah "Tinggi".
mengajukan pertanyaan: Mencocokkan karakter yang berurutan, misalnya 6 digit berturut-turut "458925".
Solusi 1: Objek biasa/dddddd/gi.
Masalah: Pengulangan "d" tidak mudah dibaca dan rumit untuk ditulis.
Solusi 2: Gunakan qualifier (?, +, *, {}) untuk menyelesaikan pencocokan kemunculan karakter tertentu secara berurutan. Objek biasa/d{6}/gi.
Ketika karakter titik (.) digunakan dengan kualifikasi, karakter tersebut dapat mencocokkan karakter apa pun dalam rentang angka yang ditentukan.
Ekspresi reguler mendukung pencocokan serakah dan pencocokan malas saat mencocokkan karakter apa pun dalam rentang tertentu.
Dalam ekspresi reguler, konten yang diapit oleh karakter braket "()" disebut "subekspresi".
Tanda kurung mengimplementasikan pencocokan catch dan cater, dan jika tanda kurung tidak digunakan maka menjadi catch dan er. 
Jika tidak dikelompokkan, berarti mencocokkan 2 karakter c; setelah dikelompokkan, berarti mencocokkan 2 string "bc".
: Proses menyimpan konten yang cocok dengan subekspresi ke dalam area cache sistem.
Non-capturing: Jangan simpan konten subekspresi yang cocok di cache sistem, gunakan (?:x) untuk melakukannya.
Metode replace() dari objek String dapat langsung menggunakan $n (n adalah bilangan bulat positif lebih besar dari 0) untuk mendapatkan konten yang diambil dan menyelesaikan operasi penggantian konten yang ditangkap oleh subekspresi.
Anda dapat menggunakan "(?:x)" untuk mencapai pencocokan non-penangkapan
Saat menulis ekspresi reguler, jika Anda ingin mendapatkan konten subekspresi yang disimpan di area cache dalam ekspresi reguler, Anda dapat menggunakan "n" (n adalah bilangan bulat positif lebih besar dari 0). prosesnya adalah "referensi terbalik".
Pernyataan lebar nol : mengacu pada pencocokan subekspresi lebar nol, digunakan untuk mengetahui apakah konten yang cocok dengan subekspresi berisi kumpulan karakter tertentu sebelum atau sesudahnya.
Klasifikasi: Dibagi menjadi prefetch maju dan prefetch mundur, tetapi hanya prefetch maju yang didukung dalam JavaScript, yaitu pencocokan data sebelum berisi atau tidak berisi konten yang diambil, dan hasil pencocokan tidak berisi konten yang diambil.
Ada banyak operator dalam ekspresi reguler. Dalam penerapan sebenarnya, berbagai operator akan dicocokkan berdasarkan urutan prioritas. Urutan operator yang umum digunakan dalam ekspresi reguler, diurutkan dari tinggi ke rendah, adalah sebagai berikut.
[Kasus] Pencarian dan penggantian konten
Ide penerapan kode :
Implementasi kode
<!DOCTYPEhtml>
<html>
<kepala>
<meta charset="UTF-8">
<title>Pencarian dan penggantian konten</title>
<gaya>
p{mengapung:kiri;}
masukan{margin:0 20 piksel;}
</gaya>
</kepala>
<tubuh>
<p>Konten sebelum difilter:<br>
<textarea id="pre" row="10" cols="40"></textarea>
<masukan id="btn" type="button" value="filter">
</p>
<p>Konten yang difilter:<br>
<textarea id="res" row="10" cols="40"></textarea>
</p>
<skrip>
document.getElementById('btn').onclick = function () {
// Tentukan aturan konten yang perlu dicari dan diganti. [u4e00-u9fa5] berarti mencocokkan karakter Cina apa pun var reg = /(bad)|[u4e00-u9fa5]/gi;
var str = document.getElementById('pre').value;
var newstr = str.replace(reg, '*');
document.getElementById('res').innerHTML = newtr;
};
</skrip>
</tubuh>
</html> Rekomendasi terkait: Tutorial pembelajaran JavaScript
. Di atas adalah ekspresi reguler JavaScript. Untuk lebih jelasnya, harap perhatikan artikel terkait lainnya di situs web PHP Cina!
