Home » Javascript » RegExp di JavaScript: Cara dan Contoh Codenya

RegExp di JavaScript: Cara dan Contoh Codenya

by Catur Kurnia Sari
by Catur Kurnia Sari

Ekspresi reguler adalah rangkaian karakter yang membentuk pola pencarian.

Pola pencarian dapat digunakan untuk pencarian teks dan operasi penggantian teks.

Apa Itu Ekspresi Reguler?

Ekspresi reguler adalah rangkaian karakter yang membentuk pola pencarian.

Saat kita mencari data dalam teks, kita dapat menggunakan pola pencarian ini untuk menjelaskan apa yang dicari.

Ekspresi reguler dapat berupa satu karakter, atau pola yang lebih rumit.

Ekspresi reguler dapat digunakan untuk melakukan semua jenis pencarian teks dan operasi penggantian teks.

Sintaks:

/pattern/modifiers;

Contoh:

var patt = /dosenit/i;

Contoh menjelaskan:

/ dosenit / i adalah ekspresi reguler.

dosenit adalah sebuah pola (untuk digunakan dalam pencarian).

i adalah pengubah (mengubah pencarian menjadi case-insensitive).

Menggunakan Metode String

Dalam JavaScript, ekspresi reguler sering digunakan dengan dua metode string: search() dan replace().

Metode search() menggunakan ekspresi untuk mencari kecocokan, dan mengembalikan posisi kecocokan.

Metode replace() mengembalikan string yang dimodifikasi pada tempat dimana pola diganti.

Menggunakan String search() Dengan String

Metode search() mencari string untuk nilai tertentu dan mengembalikan posisi yang cocok.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p> Telusuri string untuk "Dosenit", dan tampilkan posisi yang cocok: </p>
<p id="demo"></p>

<script>
var str = "Visit dosenit!"; 
var n = str.search("dosenit");
document.getElementById("demo").innerHTML = n;
</script>

</body>
</html>

Menggunakan String search() Dengan Ekspresi Reguler

Contoh:

Gunakan ekspresi reguler untuk melakukan penelusuran tidak case sensitive “dosenit” dalam string:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p> Telusuri string untuk "dosenit", dan tampilkan posisi pertandingan: </p>
<p id="demo"></p>

<script>
var str = "Visit dosenit!"; 
var n = str.search(/dosenit/i);
document.getElementById("demo").innerHTML = n;
</script>

</body>
</html>

Menggunakan String replace() Dengan String

Metode replace() menggantikan nilai yang ditentukan dengan nilai lain dalam string.

Contoh:

<!DOCTYPE html>
<html>

<body>

<h2>JavaScript String Methods</h2>

<p> Ganti "Microsoft" dengan "dosenit" di paragraf di bawah ini: </p>
<button onclick="myFunction()">Cobalah</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("Microsoft","dosenit");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>


Menggunakan String replace() Dengan Regular Expression

Contoh:

Gunakan ekspresi reguler yang tidak case sensitive untuk menggantikan Microsoft dengan Dosenit dalam string.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p> Ganti "microsoft" dengan "Dosenit" pada paragraf di bawah ini: </p>
<button onclick="myFunction()">Cobalah</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace(/microsoft/i,"Dosenit");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>


Apakah anda menyadari?

Argumen ekspresi reguler (sebagai ganti argumen string) dapat digunakan dalam metode di atas.
Ekspresi reguler dapat membuat pencarian menjadi jauh lebih efektif (tidak peka huruf besar / kecil misalnya).

Pengubah Ekspresi Reguler

Pengubah dapat digunakan untuk melakukan pencarian global yang tidak peka huruf besar / kecil:

ModifierDeskripsi
iLakukan pencocokan tidak peka huruf besar / kecil
gLakukan pencocokan global (temukan semua kecocokan tidak berhenti setelah kecocokan pertama)
mLakukan pencocokan multi baris

Pola Ekspresi Reguler

Tanda kurung digunakan untuk menemukan berbagai karakter:

EkspresiDeskripsi
[abc]Temukan salah satu karakter di antara tanda kurung
[0-9]Temukan salah satu digit di antara tanda kurung
(x|y)Temukan salah satu alternatif yang dipisahkan dengan |

Metakarakter adalah karakter dengan arti khusus:

MetakarakterDeskripsi
\dTemukan digit
\sTemukan karakter spasi putih
\bTemukan kecocokan di awal kata seperti ini: \ bWORD, atau di akhir kata seperti ini: WORD \ b
\uxxxxTemukan karakter Unicode yang ditentukan oleh angka heksadesimal xxxx

Quantifier menentukan jumlah:

QuantifierDeskripsi
n+Cocokan semua string yang mengandung setidaknya satu n
n*Mencocokkan string apa pun yang berisi nol atau lebih kemunculan n
n?Cocok dengan string apa pun yang berisi nol atau satu kemunculan n

Menggunakan Objek RegExp

Dalam JavaScript, objek RegExp adalah objek ekspresi reguler dengan properti dan metode yang telah ditentukan sebelumnya.

Menggunakan test()

Metode test() adalah metode ekspresi RegExp.

Method ini digunakan untuk mencari string pada sebuah pola, dan mengembalikan true atau false, tergantung pada hasilnya.

Contoh berikut mencari string untuk karakter “e”.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p> Menelusuri "e" di paragraf berikutnya: </p>
<p id="p01">Hal terbaik dalam hidup gratis! </p>

<p id="demo"></p>

<script>
text = document.getElementById("p01").innerHTML; 
document.getElementById("demo").innerHTML = /e/.test(text);
</script>

</body>
</html>

Menggunakan exec()

Metode exec() adalah metode ekspresi RegExp.

Method ini digunakan untuk mencari string untuk pola tertentu, dan mengembalikan teks yang ditemukan sebagai objek.

Jika tidak ada kecocokan yang ditemukan, maka mengembalikan objek kosong (null).

Contoh berikut mencari string untuk karakter “e”.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p id="demo"></p>

<script>
var obj = /e/.exec("Yang terbaik dalam hidup adalah kebebasan!");
document.getElementById("demo").innerHTML =
"Temukan " + obj[0] + " posisi " + obj.index + " pada teks: " + obj.input;
</script>

</body>
</html>

You may also like