Tutorial Regex untuk Non-Programmer

Wildan M Jul 15, 2021 ・5 min read

Mungkin anda sudah pernah melihat atau membaca tutorial Regex, atau Regular Expression untuk keperluan validasi form atau data. Namun yang jarang kalian tahu adalah pencarian dan pengekstrakan data secara cepat, tanpa harus menulis sebuah program.

Anda bisa melihat tutorial diatas, atau apabila anda tidak punya waktu 15 menit untuk melihat full videonya, no problem. Aku akan menjelaskan ringkasan videonya berikut.

Agar kita bisa menggunakan Regex tanpa pemrograman, kita bisa membuat membuka editor regex online, salah satunya https://regexr.com. sebenarnya ada banyak jenis online Regex editor namun yang sering saya pakai adalah itu.

Regexr.com mempunyai buah dua task utama, yaitu replace dan list (mengganti atau mencari). Dalam salah satu contoh video tersebut saya ingin mengambil URL dari salah satu sitemap website saya, file sitemapnya seperti ini:

<!--  generator="wordpress.com"  -->
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"....>
<url>
<loc>https://willandgottaloveideas.wordpress.com/2018/05/21/revolusi-blog-2018-bye-bye-wordpress/</loc>
<mobile:mobile/>
<image:image>
...
</image:image>
<lastmod>2021-02-18T13:18:02+00:00</lastmod>
<changefreq>monthly</changefreq>
</url>
<url>
<loc>https://willandgottaloveideas.wordpress.com/about/</loc>
<mobile:mobile/>
<image:image>
...
</image:image>
<lastmod>2018-05-21T07:04:56+00:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
<url>
....
</urlset>

Dalam sitemap itu, bisa kita lihat URL halaman terletak pada <loc>...</loc>, bagian itulah yang kita cari.

untuk mengekstrak URL tersebut, kita bisa menggunakan pattern seperti berikut:

<loc>(.+?)</loc>

menggunakan listing $1\n (yang artinya, ambil teks yang didalam kurung pertama), maka hasil yang keluar adalah:

https://willandgottaloveideas.wordpress.com/2018/05/21/revolusi-blog-2018-bye-bye-wordpress/
https://willandgottaloveideas.wordpress.com/about/
...

Jadi, apabila kita sudah memahami regex maka cukup cepat kita bisa mengambil informasi yang kita butuhkan dengan cepat.

Kemudian dicontoh kedua, aku menggunakan regex untuk mengambil data barang di e-commerce, menggunakan Regex aku dapat mengambil data dari bagian html yang seperti ini:

<div ...><div ...>
<div ...><div ...><div ...><div ...><div ...><div ...><div ...><div ...><div ...><div ...></div></a><div ...><div ...>Ad</span></div></div><div ...><div ...><div ...>Produk Terbaru</div><div data-testid="spnSRPProdName">HP 14s-cf2508TU Laptop/Pentium Gold 6405U/8GB/IntelUHD/512GBSSD - Silver</div><div ...>Cashback</div><div data-testid="spnSRPProdPrice">Rp6.699.000</div><div ...><div ...><div ...></i><div ...><div ...>Jakartdiv ...><div ...>HP Official</span></div></div><div ...><div ...></i><div ...>4.8</span> <div ...></span> <div ...>Terjual 494</span></div></div></a><div ...><div ...><div ...></div></div></div></div></div></div></div></div></div>
<div ...><div ...><div ...><div ...><div ...><div ...><div ...><div ...><div ...><div ...></div></a><div ...><div ...>Ad</span></div></div><div ...><div ...><div ...>Produk Terbaru</div><div data-testid="spnSRPProdName">ASUS VIVOBOOK A409MA BV421TS BV422TS N4020 4G 256 SSD 14" HD W10 OHS</div><div data-testid="spnSRPProdPrice">Rp5.499.000</div><div ...><div ...><div ...></i><div ...><div ...>Surabaya</span><div ...>Trinity IT Zone</span></div></div></div></a><div ...><div ...><div ...></div></div></div></div></div></div></div></div></div>
<div ...><div ...><div ...><div ...><div ...><div ...><div ...><div ...><div ...><div ...></div></a><div ...><div ...>Ad</span></div></div><div ...><div ...><div data-testid="spnSRPProdName">LENOVO IP Gaming 3 15ARH05 N1ID Ryzen 5-4600U 8GB 512SSD GTX1650T</div><div ...><div  data-testid="spnSRPProdPrice">Rp11.700.000</div><div ...><div ...><div ...></i><div ...><div ...>Malang</span><div ...>EA TECHNOLOGI</span></div></div><div ...><div ...></i><div ...>5.0</span> <div ...></span> <div ...>Terjual 1</span></div></div></a><div ...><div ...><div ...></div></div></div></div></div></div></div></div></div>
...

dengan regex pattern...

data-testid="spnSRPProdName">(.+?)</div>.+?data-testid="spnSRPProdPrice">(.+?)</div>

...serta listing $1,$2\n, menghasilkan seperti data berikut:

HP 14s-cf2508TU Laptop/Pentium Gold 6405U/8GB/IntelUHD/512GBSSD - Silver,Rp6.699.000
ASUS VIVOBOOK A409MA BV421TS BV422TS N4020 4G 256 SSD 14" HD W10 OHS,Rp5.499.000
LENOVO IP Gaming 3 15ARH05 N1ID Ryzen 5-4600U 8GB 512SSD GTX1650T,Rp11.700.000

Data tersebut adalah berbentuk CSV dan bisa kita gunakan untuk excel atau data tabular lainnya untuk diproses lebih jauh, seperti yang dicontohkan dalam video.

Kemudian, menggunakan regex aku juga dapat mengambil URL dari halaman Instagram-ku, kira-kira seperti ini HTML-nya:

<div ...><div ...><div ...><a href="/p/CREPUepjwYV/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div><div ...><div ...><div ...><div ...></path></svg></div></div></a></div><div ...><a href="/p/CQm_ZjtD9Ks/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div><div ...>
<div ...><div ...><div ...></path></svg></div></div></a></div><div ...><a href="/p/CH5XSY2DaNh/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div><div ...><div ...><div ...><div ...></path></svg></div></div></a></div></div><div ...><div ...><a href="/p/CHvZ2RfjJYd/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div><div ...><div ...><div ...><div ...></path></svg></div></div></a></div><div ...><a href="/p/CHEjLIsjXz5/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div><div ...><div ...><div ...><div ...></path></svg></div></div></a></div><div ...><a href="/p/CGz1iqIjxb5/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div></a></div></div><div ...><div ...><a href="/p/CGu-h1-DupS/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div></a></div><div ...><a href="/p/CGU7-MWDD5T/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div></a></div><div ...><a href="/p/CGRQTQGDQ7v/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div><div ...><div ...><div ...><div ...></path></svg></div></div></a></div></div><div ...><div ...><a href="/p/CEzXDhxDilr/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div></a></div><div ...><a href="/p/CEhAQ16jAIx/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div></a></div><div ...><a href="/p/CERi6hjDIpY/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div></a></div></div><div ...><div ...><a href="/p/CEGq9SCDInF/" tabindex="0"><div ...><div ...><div ...></div><div ...></div></div></a></div>

kemudian menggunakan pattern href="(.+?)" dan listing "https://instagram.com$1/media?size=l",, aku bisa mengambil data halaman postingan Instagram, menjadikannya menjadi sebuah list dalam JavaScript, bentuknya sebagai berikut

[
  "https://instagram.com/p/CREPUepjwYV/?size=l",
  "https://instagram.com/p/CQm_ZjtD9Ks/?size=l",
  "https://instagram.com/p/CH5XSY2DaNh/?size=l",
  "https://instagram.com/p/CHvZ2RfjJYd/?size=l",
  "https://instagram.com/p/CHEjLIsjXz5/?size=l",
  "https://instagram.com/p/CGz1iqIjxb5/?size=l",
].forEach(x => open(x, "_blank"))

apabila dijalankan kan dalam Inspector JavaScript, sesuai dalam dokumentasi api Instagram, maka browser akan memuat semua tab postingan tersebut dalam berbentuk gambar sehingga kita bisa save gambar tersebut untuk keperluan arsip atau semacamnya.

Keren bukan? Sekedar info, aku juga mulai untuk membuat tutorial programming dalam YouTube, Jika kalian merasa hal ini membantu, Mungkin kalian ingin Kalian bisa cek tutorial lain di channel YouTube ku. semoga membantu

diskusi.tech (beta) Community

diskusi.tech (beta) Community is a community of 1,091 amazing users

Tutorial Regex untuk Non-Programmer

Discussion

Read next

Beberapa Situs Belajar Programming Terbaik

Baca Buku Getting Real, Hari Ketiga[2]: Constrains force creativity

Baca Buku Getting Real, Hari Ketiga[1]: Outside money is a plan B

Baca Buku Getting Real, Hari kedua[2]: What's your problem?