Tips & Trik Teknologi

Cara Menghapus Karakter atau String di VS Code dengan Regex dan Find & Replace

04 November 2025 23:53 WIB

by Khoirul Roziq

Mau bersih-bersih file HTML, CSS, atau kode lainnya di VS Code tapi kebingungan harus mulai dari mana? Tenang, ada dua cara gampang untuk menghapus karakter atau string: menggunakan Find & Replace biasa atau Find & Replace dengan Regex. Di artikel ini, kamu akan belajar lengkap, step by step, beserta contoh yang mudah dipahami.

1. Menghapus dengan Find & Replace Biasa

Cara ini cocok kalau kamu ingin menghapus kata atau karakter tertentu secara langsung, tanpa pola yang rumit.

Langkah-langkah:

  1. Buka file di VS Code.

  2. Tekan Ctrl + H (Linux & Windows) atau Cmd + H (Mac) untuk membuka Find & Replace.

  3. Di kotak Find, ketik string atau karakter yang ingin dihapus.

  4. Di kotak Replace, kosongkan (biarkan blank) supaya karakter itu hilang.

  5. Klik Replace All untuk menghapus semuanya sekaligus.

Contoh:

Misal ada teks:

<p>Hello World!</p>
<p>Hello VS Code!</p>

Kamu ingin menghapus kata Hello saja:

  • Find: Hello

  • Replace: (kosongkan)

  • Hasilnya:

<p> World!</p>
<p> VS Code!</p>

Mudah, kan? Tapi cara ini tidak fleksibel kalau string yang ingin dihapus berbeda-beda nilainya. Nah, di sinilah Regex masuk.

2. Menghapus dengan Regex di VS Code

Regex (Regular Expression) adalah cara pintar mencari pola tertentu. Dengan Regex, kamu bisa menghapus karakter atau string yang memiliki pola sama, walaupun nilainya berbeda.

Cara Mengaktifkan Regex di VS Code

  1. Tekan Ctrl + H / Cmd + H.

  2. Aktifkan tombol .* di Find & Replace untuk mode Regex.

Sintaks Regex Dasar Yang Sering Digunakan

Sintaks Fungsi Contoh Penggunaan
. Mewakili satu karakter apapun kecuali line break (\n) a.c → cocok dengan abc, a1c, a-c
* Zero atau lebih dari karakter sebelumnya ab* → cocok dengan a, ab, abb, abbb
+ Satu atau lebih dari karakter sebelumnya ab+ → cocok dengan ab, abb, tapi tidak dengan a
? Zero atau satu kemunculan karakter sebelumnya colou?r → cocok color atau colour
\d Mewakili angka 0–9 \d{4} → cocok dengan 2025
\D Mewakili bukan angka \D+ → cocok dengan huruf atau simbol
\w Mewakili huruf, angka, atau underscore \w+ → cocok dengan user_name123
\W Mewakili bukan huruf/angka/underscore \W → cocok dengan @, !, #
\s Mewakili spasi, tab, atau line break \s+ → cocok dengan satu atau lebih spasi/tab
\S Mewakili bukan spasi \S+ → cocok dengan kata atau angka tanpa spasi
^ Awal baris ^Hello → cocok jika baris dimulai dengan Hello
$ Akhir baris end$ → cocok jika baris berakhir dengan end
[] Karakter set, cocok dengan salah satu karakter di dalam tanda kurung [abc] → cocok a, b, atau c
[^] Negasi karakter set, cocok dengan semua karakter kecuali di dalam kurung [^abc] → cocok dengan semua kecuali a, b, atau c
() Grouping, mengelompokkan pola (ab)+ → cocok ab, abab, ababab
` ` OR / alternatif, cocok dengan salah satu pola
{n} Mengulang tepat n kali \d{3} → cocok dengan 123
{n,} Mengulang n kali atau lebih \d{2,} → cocok dengan 12, 1234
{n,m} Mengulang minimal n dan maksimal m kali \d{2,4} → cocok 12, 123, 1234

Contoh 1: Menghapus atribut HTML dengan nilai berbeda

Misal kamu punya file HTML:

<p data-start="1334" data-end="1414">Halo</p>
<p data-start="1450" data-end="1500">Hai</p>

Kalau mau menghapus semua atribut data-start dan data-end, tapi nilainya berbeda-beda, pakai regex:

Find:

\s*(data-start="[^"]*"\s*|data-end="[^"]*"\s*)+

Replace: (kosongkan)

Hasilnya:

<p>Halo</p>
<p>Hai</p>

Penjelasan Regex:

  • \s* → menangkap spasi atau line break di depan atau di antar atribut

  • data-start="[^"]*" → menangkap data-start dengan nilai apapun

  • data-end="[^"]*" → menangkap data-end dengan nilai apapun

  • | → artinya "atau"

  • + → menangkap satu atau lebih kemunculan atribut

Contoh 2: Menghapus semua angka

Kalau kamu mau hapus semua angka di file:
Find:

\d+

Replace: (kosongkan)

Hasil:

Sebelum: Tahun 2025 adalah tahun baru
Sesudah: Tahun adalah tahun baru

Contoh 3: Menghapus karakter khusus

Misal ada banyak tanda @ di teks, bisa pakai regex:
Find: @
Replace: (kosongkan)

Regex juga bisa dikombinasikan untuk pola lebih kompleks, misal hapus huruf + angka:
Find: [A-Za-z0-9]+ → hapus semua huruf dan angka.

3. Tips Agar Aman Saat Menggunakan Regex

  1. Selalu cek dulu dengan Find sebelum klik Replace All.

  2. Gunakan Replace One by One dulu kalau masih ragu.

  3. Pastikan mode Regex aktif (.*) di VS Code.

  4. Gunakan tanda () dan | kalau pola lebih dari satu.

Kesimpulan

Menghapus karakter atau string di VS Code bisa dilakukan dengan mudah:

  • Find & Replace biasa → untuk string atau karakter yang sama persis.

  • Find & Replace dengan Regex → untuk pola yang fleksibel, bisa menghapus nilai berbeda, angka, atau atribut HTML sekaligus.

Dengan memahami kedua cara ini, kamu bisa lebih cepat bersih-bersih kode dan bekerja lebih efisien di VS Code. Regex mungkin terlihat rumit di awal, tapi begitu dipahami, ini adalah senjata ampuh untuk manipulasi teks.