14 Januari 2016 - 02:34:18 - Read: 1303

Replace String Dengan Manipulasi Berbasis Object di Javascript

{hi:"hello",apa:"kabar",developer:"javascript?"}

Pada pernah nemu kasus kayak gini gak?

Ubahlah huruf "a" didalam kalimat berikut ini menjadi angka "4" menggunakan javascript?

"ini adalah contoh kalimat"

Helmi: "Ah gampang. nih..."

"ini adalah contoh kalimat".replace(/a/g,"4");
>> ini 4d4l4h contoh k4lim4t

Helmi: "gitu kan?"

Dodi: "Sekarang ubah huruf "a" dan "i" menjadi "4" dan "1"

Helmi : "Hah?"

Dodi: "Ok. sekarang kasusnya gini:

var x="a"
var y="4"
var kalimat="ini adalah contoh kalimat.
ubahlah setiap huruf didalam kalimat ini
yang sama dengan variabel x menjadi huruf
karakter di variabel y";

Helmi: "Hah???"

Dodi: "Atau gini"

var kalimat="ini adalah contoh kalimat";
var x=document.getElementById("INPUT-HURUF-YANG-AKAN-DIGANTI").value;
var y=document.getElementById("INPUT-HURUF-PENGGANTI-SUKA2-USER").value;

Helmi: "Hah??????"

Dodi: "Atau yang terakhir, yang sederhana aja kayak gini?"

var kalimat="ini adalah contoh kalimat";
var x="a=4,i=1";

Helmi: "..."

bagi PHP programmer, mungkin mudah saja mengubah kalimat sesuai dengan ketentuan yang ada didalam variabel "x". Tinggal "explode", looping pake foreach, trus return pake fungsi "strtr()" kelar. Tapi buat programmer Javascript native, hal ini mungkin lumayan membingungkan. "Iya apa nggak sih? :p "

Helmi: "Ah, stackoverflow.com aja bro. Pasti nemu jawabannya :D"

Dodi: "Yakin? Yakin gak bingung? :p"

Helmi: "Ya kalo nggak, tinggal bikin dulu di PHP, trus tinggal konversi ke javascript."

Dodi: "Yakin bisa? Kalo di PHP enak, index array bisa string, misalnya $x["a"]=4, tapi dijavascript index array harus dalam bentuk numeric loh. Coba deh lihat di http://www.w3schools.com/js/js_arrays.asp"

Associative Arrays

Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes.  

Note WARNING !!
If you use a named index, JavaScript will redefine the array to a standard object.
After that, all array methods and properties will produce incorrect results.

Example:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined
 
Dodi: "Tuh kan.."
Helmi: "Jadi solusinya bagaimana?"
 
Yarp, dari kasus kedua orang aneh diatas, masalah utamanya adalah:
- Mengubah beberapa karakter yang ditentukan berdasarkan input dari user
- Variabel "huruf yang akan diubah" dan "huruf penggantinya" adalah dinamis. Karena bisa berbeda-beda tergantung input ketika runtime program.
 
Ada banyak solusi yang lebih efisien dan efektif, tapi karena referensi dari stackoverflow lumayan membingungkan, kenapa tidak kita buat sendiri trik yang bisa kita pahami sendiri?
 
Triknya adalah, merubah "kalimat" dari inputan user menjadi sebuah object, dengan masing-masing karakter/huruf didalamnya menjadi "parameter" yang memiliki nilai karakter itu sendiri. Perhatikan contoh dibawah ini:
 
var obj={};
var kalimat="cafelinux";
for(var i=0;i<kalimat.length;i++){
    obj[kalimat.substr(i,1)]=kalimat.substr(i,1);
}
console.log(obj);
>> Hasil: Object { c: "c", a: "a", f: "f", e: "e", l: "l", i: "i", n: "n", u: "u", x: "x" }

Kelihatan gak? masing-masing parameter adalah karakter dari variabel kalimat, yang memiliki value "parameter" itu sendiri.

Kemudian, jika kita mengubah obj.a=4; kira2, apa yang akan terjadi?

var obj={};
var kalimat="cafelinux";
for(var i=0;i<kalimat.length;i++){
    obj[kalimat.substr(i,1)]=kalimat.substr(i,1);
}
// mengubah object ditengah-tengah runtime
obj.a=4;
console.log(obj);

>> Hasil: Object { c: "c", a: 4, f: "f", e: "e", l: "l", i: "i", n: "n", u: "u", x: "x" }

Nah, disinilah "trik"nya.

Kalimat Asli: "cafelinux"

Huruf Pengganti: "a" menjadi "4" DAN "i" menjadi "1"

var obj={};
var kalimat="cafelinux";
for(var i=0;i<kalimat.length;i++){
    obj[kalimat.substr(i,1)]=kalimat.substr(i,1);
}
// mengubah object ditengah-tengah runtime
console.log(obj);


>> Hasil: Object { c: "c", a: "a", f: "f", e: "e", l: "l", i: "i", n: "n", u: "u", x: "x" }


obj.a=4;
obj.i=1;
console.log(obj);


>> Hasil: Object { c: "c", a: 4, f: "f", e: "e", l: "l", i: 1, n: "n", u: "u", x: "x" }

Setelah kita memiliki nilai "Object" yang baru, kemudian kita looping variabel kalimat dengan output nilai dari object dalam bentuk string.

var hasil="";
for(var i=0;i<kalimat.length;i++){
    hasil += obj[kalimat.substr(i,1)];
}
console.log(hasil);
>> Hasil: c4fel1nux


Jadi rumusnya adalah:

String > Object > Pemberian nilai baru untuk Object > Ubah kembali ke String :)

Yarp, semoga gak bermanfaat :D