30 Cuplikan Kode Regex yang Berguna untuk Pengembang Web

Ekspresi reguler adalah alat yang ampuh yang harus ada di sabuk alat setiap pengembang. Mereka dapat cocok dengan serangkaian karakter berdasarkan parameter yang sangat kompleks, yang dapat menghemat banyak waktu Anda ketika membangun situs web yang dinamis.

Pengembang web menghadapi tugas yang berbeda dari pengembang perangkat lunak tetapi banyak dari fundamental kode yang sama tetap ada. Ekspresi reguler (atau regex) memang punya kurva belajar awal yang curam, tetapi mereka bisa sangat kuat bila digunakan dengan benar.

Bagian tersulit adalah mempelajari sintaks dan belajar bagaimana menulis kode regex Anda sendiri dari awal. Untuk menghemat waktu, saya telah mengatur 30 snipet kode regex berbeda yang dapat Anda masukkan ke dalam proyek pengembangan. Dan karena regex tidak terbatas pada satu bahasa, Anda dapat menerapkan cuplikan ini dari mana saja JavaScript untuk PHP atau Python.

1. Kekuatan Kata Sandi

^ (? =. * [AZ]. * [AZ]) (? =. * [! @ # $ & *]) (? =. * [0-9]. * [0-9]) (? = . * [az]. * [az]. * [az]). 8 $

Memeriksa kekuatan kata sandi seringkali subjektif sehingga tidak ada jawaban mutlak yang benar. Tapi saya merasa potongan regex ini adalah titik awal yang bagus jika Anda tidak ingin menulis pemeriksa kekuatan kata sandi Anda sendiri dari awal. (Sumber)

2. Warna Heksadesimal

\ # ([a-fA-F] | [0-9]) 3, 6

Bidang pengembangan web ada di mana-mana dengan kode warna hex. Cuplikan regex ini dapat digunakan untuk menarik kecocokan kode hex dari string apa pun untuk tujuan apa pun. (Sumber)

3. Validasi Alamat Email

/[A-Z0-9._%+-[+@[A-Z0-9-[+.+.[A-Z[2,4/igm

Salah satu tugas paling umum bagi pengembang adalah memeriksa apakah string diformat dengan gaya alamat email. Ada banyak varian berbeda untuk menyelesaikan tugas ini, jadi tautan SitePoint ini menawarkan dua potongan kode berbeda untuk memeriksa sintaks email terhadap string. (Sumber)

4. Alamat IPv4

/\b(?:(?:25[0-5[|2[0-4[[0-9[|[01[?[0-9[[0-9[?)\.)3 (?: 25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?) \ B /

Mirip dengan alamat email adalah alamat IP khas yang digunakan untuk mengidentifikasi komputer tertentu yang mengakses Internet. Ekspresi reguler ini akan memeriksa string untuk melihat apakah itu mengikuti sintaks alamat IPv4. (Sumber)

5. Alamat IPv6

(([0-9a-fA-F] 1,4:) 7,7 [0-9a-fA-F] 1,4 | ([0-9a-fA-F] 1 , 4:) 1,7: | ([0-9a-fA-F] 1,4:) 1,6: [0-9a-fA-F] 1,4 | ([0-9a-fA-F] 1,4:) 1,5 (: [0-9a-fA-F] 1,4) 1,2 | ([0-9a -fA-F] 1,4:) 1,4 (: [0-9a-fA-F] 1,4) 1,3 | ([0-9a-fA-F] 1,4:) 1,3 (: [0-9a-fA-F] 1,4) 1,4 | ([0-9a-fA-F] 1,4 :) 1,2 (: [0-9a-fA-F] 1,4) 1,5 | [0-9a-fA-F] 1,4: ((: [0 -9a-fA-F] 1,4) 1,6) |: ((: [0-9a-fA-F] 1,4) 1,7 |:) | fe80: (: [0-9a-fA-F] 0,4) 0,4% [0-9a-zA-Z] 1, |:: fff (: 0 1,4) 0,1:) 0,1 ((25 [0-5] | (2 [0-4] | 1 0,1 [0-9]) 0,1 [0-9 ]) \.) 3,3 (25 [0-5] | (2 [0-4] | 1 0,1 [0-9]) 0,1 [0-9]) | ([0-9a-fA-F] 1,4:) 1,4: ((25 [0-5] | (2 [0-4] | 1 0,1 [0-9 ]) 0,1 [0-9]) \.) 3,3 (25 [0-5] | (2 [0-4] | 1 0,1 [0-9])  0,1 [0-9]))

Atau Anda mungkin ingin memeriksa alamat untuk sintaks IPv6 yang lebih baru dengan potongan regex yang lebih canggih ini. Perbedaannya kecil meskipun penting selama pengembangan. (Sumber)

6. Ribuan Pemisah

/ \ d 1,3 (? = (\ d 3) + (?! \ d)) / g

Sistem penomoran tradisional memerlukan tanda koma, titik, atau tanda lain setiap digit ketiga dalam jumlah yang lebih besar. Kode regex ini beroperasi pada nomor apa pun dan akan menerapkan tanda apa pun yang Anda pilih untuk setiap digit ketiga yang terpisah menjadi ribuan, jutaan, dll. (Sumber)

7. Tambahkan HTTP ke Hyperlink

if (! s.match (/ ^ [a-zA-Z] +: \ / \ //)) s = 'http: //' + s; 

Baik Anda menggunakan JavaScript, Ruby, atau PHP, ungkapan reguler ini terbukti sangat membantu. Ini akan memeriksa string URL apa pun untuk melihat apakah URL tersebut memiliki awalan HTTP / HTTPS, dan jika tidak, sesuaikan dulu. (Sumber)

8. Tarik Domain dari URL

/https?:\/\/(?:[-\w[+\.)?([-\w[+)\.\w+(?:\.\w+)?\/?.*/i

Setiap domain situs web berisi protokol awal (HTTP atau HTTPS) dan seringkali subdomain plus jalur halaman tambahan. Anda dapat menggunakan potongan ini untuk memotong semua itu dan mengembalikan hanya nama domain tanpa embel-embel tambahan. (SumberL

9. Urutkan Kata Kunci berdasarkan Jumlah Kata

^ [^ \ s] * $ sama persis dengan kata kunci 1-kata ^ [^ \ s] * \ s [^ \ s] * $ sama persis dengan kata kunci 2-kata ^ [^ \ s] * \ s [^ \ s] * cocok dengan kata kunci minimal 2 kata (2 dan lebih banyak) ^ ([^ \ s] * \ s) 2 [^ \ s] * $ sama persis dengan kata kunci 3 kata ^ ([^ \ s] * \ s ) 4 [^ \ s] * $ cocok dengan kata kunci 5-kata-dan-lebih banyak (longtail)

Pengguna Google Analytics dan Alat Webmaster akan sangat menikmati ungkapan reguler ini. Itu dapat mengurutkan dan mengatur kata kunci berdasarkan jumlah kata yang digunakan dalam pencarian.

Ini bisa spesifik secara numerik (mis. Hanya 5 kata) atau bisa cocok dengan rentang kata (mis. 2 kata atau lebih). Ketika digunakan untuk mengurutkan data analitik, ini adalah ekspresi yang kuat. (Sumber)

10. Temukan String Base64 Valid di PHP

\? php [\ t] eval \ (base64_decode \ (\ '(([A-Za-z0-9 + /] 4) * ([A-Za-z0-9 + /] 3 = | [A-Za-z0-9 + /] 2 ==)?) 1 \ '\) \) \;

Jika Anda seorang pengembang PHP maka pada titik tertentu Anda mungkin perlu mengurai kode mencari objek biner yang disandikan Base64. Cuplikan ini dapat diterapkan ke semua kode PHP dan akan memeriksa string Base64 yang ada. (Sumber)

11. Nomor Telepon yang Valid

^ \ +? \ d 1,3? [-.]? \ (? (?:? d 2,3) \)? [-.]? \ d \ d \ d [-.]? \ d \ d \ d \ d $

Pendek, manis, dan to the point. Kode regex ini akan memvalidasi setiap sintaks nomor telepon tradisional berdasarkan gaya nomor telepon Amerika.

Karena ini dapat berubah menjadi subjek yang cukup rumit, saya sarankan membaca sekilas tumpukan Stack ini untuk jawaban yang lebih terperinci. (Sumber)

12. Leading & Trailing Whitespace

^ [\ s] + | [\ s] + $

Gunakan potongan kode ini untuk menarik spasi spasi awal / akhir dari string. Ini mungkin bukan masalah besar tapi kadang-kadang dapat mempengaruhi output ketika ditarik dari database atau diterapkan ke pengkodean dokumen lain. (Sumber)

13. Tarik Sumber Gambar)

\< *[img][^\>] * [src] * = * [\ "\ '] 0,1 ([^ \" \' \>] *)

Jika karena alasan tertentu Anda perlu mengeluarkan sumber gambar langsung dari HTML, cuplikan kode ini adalah solusi yang tepat. Meskipun dapat berjalan dengan lancar di backend, frontend JS devs seharusnya bergantung pada metode .attr () jQuery untuk frontend. (Sumber)

14. Validasi Tanggal dalam Format DD / MM / YYYY

^ (? :( ?: 31 (\ / | - | \.) (?: 0? [13578] | 1 [02]))) \ 1 | (? :( ?: 29 | 30) (\ / | - | \.) (?: 0? [1,3-9] | 1 [0-2]) \ 2)) (? :( ?: 1 [6-9] | [2-9] \ d)? \ d 2) $ | ^ (?: 29 (\ / | - | \.) 0? 2 \ 3 (? :(? :( ?: 1 [6-9] | [2-9] \ d )? (?: 0 [48] | [2468] [048] | [13579] [26]) | (? :( ?: 16 | [2468] [048] | [3579] [26]) 00)) )) $ | ^ (?: 0? [1-9] | 1 \ d | 2 [0-8]) (\ / | - | \.) (? :( ?: 0? [1-9]) | (?: 1 [0-2])) \ 4 (? :( ?: 1 [6-9] | [2-9] \ d)? \ D 2) $

Tanggal rumit karena mereka dapat muncul sebagai teks + angka, atau hanya sebagai angka dengan format berbeda. PHP memiliki fungsi tanggal yang fantastis tetapi ini tidak selalu merupakan pilihan terbaik saat menarik string mentah. Pertimbangkan alih-alih menggunakan persamaan reguler yang dibuat untuk sintaks tanggal khusus ini. (Sumber)

15. Pencocokan ID Video YouTube

/http:\/\/(?:youtu\.be\/|(?:[az[2,3\.)?youtube\.com\/watch(?:\?|#\!)v =) ([\ w -] 11). * / gi

YouTube telah mempertahankan struktur URL yang sama selama bertahun-tahun karena hanya berfungsi. Itu juga merupakan situs berbagi video yang paling populer di web, jadi video YouTube cenderung mendorong lalu lintas terbanyak.

Jika Anda perlu mengeluarkan ID video YouTube dari URL, kode regex ini sempurna dan harus bekerja dengan baik untuk semua varian struktur URL YouTube. (Sumber)

16. ISBN yang valid

/ \ b (?: ISBN (? ::? |))? ((?: 97 [89])? \ d 9 [\ dx]) \ b / i

Buku cetak mengikuti sistem penomoran yang dikenal sebagai ISBN. Ini bisa menjadi agak rumit ketika Anda mempertimbangkan perbedaan antara ISBN-10 dan ISBN-13.

Namun potongan luar biasa ini memungkinkan Anda untuk memvalidasi nomor ISBN dan memeriksa apakah itu ISBN10 atau 13. Semua kode ditulis dalam PHP sehingga ini akan terbukti sangat berguna bagi pengembang web. (Sumber)

17. Periksa Kode Pos

^ \ d 5 (?: [- \ s] \ d 4)? $

Pembuat cuplikan ini tidak hanya merilis karyanya secara gratis, tetapi ia juga meluangkan waktu untuk menjelaskannya. Anda akan menemukan potongan ini bermanfaat baik jika Anda mencocokkan kode pos 5 digit atau versi 9 digit yang lebih panjang.

Perlu diingat bahwa ini dimaksudkan terutama untuk sistem kode pos Amerika sehingga ini mungkin memerlukan penyesuaian untuk negara lain. (Sumber)

18. Nama Pengguna Twitter yang valid

/ @ ([A-Za-z0-9 _] 1,15) /

Berikut cuplikan kode yang sangat kecil untuk dicocokkan dengan nama pengguna Twitter yang ditemukan dalam sebuah string. Itu memeriksa @menyebut sintaks yang sempurna untuk secara otomatis memindai isi tweet (atau tweet). (Sumber)

19. Nomor Kartu Kredit

^ (?: 4 [0-9] 12 (?: [0-9] 3)? | 5 [1-5] [0-9] 14 | 6 (?: 011 | 5 [ 0-9] [0-9]) [0-9] 12 | 3 [47] [0-9] 13 | 3 (?: 0 [0-5] | [68] [0-9 ]) [0-9] 11 | (?: 2131 | 1800 | 35 \ d 3) \ d 11) $

Memvalidasi nomor kartu kredit sering membutuhkan platform yang aman di-host di tempat lain secara online. Tetapi regex dapat digunakan untuk persyaratan minimal nomor kartu kredit yang khas.

Daftar kode yang lebih komprehensif untuk masing-masing kartu dapat ditemukan di sini. Ini termasuk Visa, MasterCard, Discover, dan banyak lainnya. (Sumber)

20. Temukan Atribut CSS

^ \ s * [a-zA-Z \ -] + \ s * [:] 1 \ s [a-zA-Z0-9 \ s. #] + [;] 1

Mungkin jarang menjalankan regex di atas CSS, tetapi ini juga bukan situasi yang aneh.

Cuplikan kode ini dapat digunakan untuk menarik setiap properti dan nilai CSS yang cocok dari setiap penyeleksi. Itu dapat digunakan untuk sejumlah alasan, mungkin untuk melihat potongan CSS atau untuk menghapus properti duplikat. (Sumber)

21. Strip Komentar HTML

Jika karena alasan apa pun Anda perlu menghapus semua komentar dari blok HTML, ini adalah kode regex untuk digunakan. Bersamaan dengan ekspresi Anda akan menemukan contoh PHP menggunakan preg_replace. (Sumber)

22. URL Profil Facebook

/(?:http:\/\/)?(?:www\.)?facebook\.com\/(?:(?:ww**#!¡/)?(?:pages\/)? (?: [\ w \ -] * \ /) * ([\ w \ -] *) /

Facebook sangat populer dan telah melalui banyak skema URL yang berbeda. Dalam situasi di mana Anda mengambil URL profil dari pengguna, mungkin bermanfaat untuk mem-parsing string dan mengonfirmasi bahwa mereka terstruktur dengan baik. Cuplikan ini dapat melakukan hal itu dan sangat cocok untuk semua tautan gaya FB. (Sumber)

23. Periksa versi Internet Explorer

^. * MSIE [5-8] (?: \. [0-9] +)? (?!. * Trident \ / [5-9] \ 0). * $

Perpindahan Microsoft ke Edge belum bulat dan banyak orang masih mengandalkan Internet Explorer klasik. Pengembang sering perlu memeriksa versi IE untuk menangani inkonsistensi dengan mesin rendering.

Cuplikan ini dapat digunakan dalam JavaScript untuk menguji agen peramban berdasarkan versi Internet Explorer (5-11) mana yang digunakan. (Sumber)

24. Ekstrak Harga

/(#$[0-9,[+(\.[0-9[2)?)/

Harga hadir dalam berbagai format yang berisi desimal, koma, dan simbol mata uang. Ekspresi reguler ini dapat memeriksa semua format yang berbeda ini untuk menarik harga dari string apa pun. (Sumber)

25. Parse E-mail Header

/\b[A-Z0-9._%+-[+@(?:[A-Z0-9-[+\.)+[A-Z[2,6#b/i

Dengan satu baris kode ini Anda dapat menguraikan header email untuk menarik keluar “untuk” informasi dari header. Ini dapat digunakan bersama-sama dengan beberapa email bergabung bersama.

Jika Anda lebih suka menghindari regex untuk tugas ini, Anda bisa mengandalkan parsing library. (Sumber)

26. Sesuaikan Filetype Tertentu

/^(.*#.(?!(htm|html|class|js)$))?[^.[*$/i

Saat Anda berurusan dengan berbagai format file seperti .xml, .html, dan .js, dapat membantu memeriksa file baik secara lokal maupun yang diunggah oleh pengguna. Cuplikan ini menarik ekstensi file untuk memeriksa apakah ekstensi itu valid dari serangkaian ekstensi yang valid yang dapat diubah sesuai kebutuhan. (Sumber)

27. Cocokkan String URL

/[-a-zA-Z0-9@:%_\+.~#?&//=[2,256\.[az[2,4#b(\/[-a-zA-Z0 -9 @:% _ \ +. ~ #? & // =] *)? / Gi

Cuplikan ini dapat digunakan baik untuk string HTTPS dan HTTP untuk memeriksa apakah teks cocok dengan sintaks domain TLD tradisional. Ada juga implementasi sederhana dari regex ini menggunakan JavaScript's RegExp. (Sumber)

28. Tambahkan rel =”nofollow” ke Tautan

(] *) (href = "https?: //) ((?! (?: (?: www \.)? '. implode (' | (?: www \.)? ', $ follow_list).') ) [^ "] +)" ((?!. * \ brel =) [^>] *) (?: [^>] *)>

Jika Anda bekerja dengan sejumlah kode HTML, akan sangat mengerikan untuk menerapkan tenaga kerja manual ke dalam tugas yang berulang. Ekspresi reguler sangat cocok untuk acara ini dan akan menghemat banyak waktu.

Cuplikan ini dapat menarik semua tautan jangkar dari blok HTML dan menambahkan rel =”nofollow” atribut untuk setiap elemen. Pengembang yang menulis kode ini cukup baik untuk menerbitkan ekspresi mentah ditambah contoh yang berfungsi di PHP.

29. Pencocokan Permintaan Media

/ @ media ([^ ] +) \ ([\ s \ S] +?) \ s * / g

Pisahkan permintaan media CSS ke dalam parameter dan properti mereka. Ini dapat membantu Anda menganalisis CSS eksternal dengan cara yang lebih bersih dengan fokus yang lebih langsung tentang bagaimana kode beroperasi. (Sumber)

30. Sintaks Pencarian Google

/([+-[?(?:'.+?'|".+?"|[^+#-] 1 [^] *)) / g

Anda dapat membuat kode regex Anda sendiri untuk memanipulasi teks yang dapat dicari menggunakan sintaksis merek dagang Google. Tanda tambah (+) menunjukkan kata kunci tambahan dan tanda minus (-) menunjukkan kata-kata yang harus diabaikan dan dihapus dari hasil.

Ini potongan yang agak rumit tetapi digunakan dengan benar dapat memberikan dasar untuk membangun algoritma pencarian Anda sendiri. (Sumber)

Bungkus

Jalan untuk menguasai regex itu panjang tetapi bermanfaat jika Anda tetap menggunakannya. Di luar alat regex biasa cara terbaik untuk belajar adalah melalui pengulangan. Coba buat aplikasi web yang mengandalkan cuplikan regex ini untuk mempelajari cara kerjanya di aplikasi web yang berfungsi nyata. Dan jika Anda memiliki cuplikan lainnya untuk disarankan, Anda dapat mempostingnya di area komentar di bawah.

Sekarang baca:

50 Potongan CSS yang Berguna Yang Seharusnya Dimiliki Setiap Desainer