Rumah  >  Artikel  >  hujung hadapan web  >  Gantikan rentetan input dengan javascript

Gantikan rentetan input dengan javascript

WBOY
WBOYasal
2023-05-12 12:05:061514semak imbas

Dengan aplikasi JavaScript yang meluas dalam pembangunan bahagian hadapan, selalunya perlu menggunakan JavaScript untuk mengendalikan rentetan yang dimasukkan oleh pengguna. Antaranya, yang paling biasa ialah penggantian rentetan. Dalam JavaScript, kami biasanya menggunakan fungsi rentetan replace() untuk melaksanakan operasi penggantian. Fungsi replace() boleh menggantikan rentetan yang sepadan dengan rentetan baharu dengan pantas. Artikel ini akan memperkenalkan cara menggunakan fungsi replace() JavaScript untuk menggantikan rentetan input.

1. Penggunaan asas fungsi replace()

Dalam JavaScript, gunakan fungsi replace() bagi objek rentetan untuk menggantikan subrentetan tertentu di dalamnya. Sintaksnya adalah seperti berikut:

string.replace(searchValue, replaceValue)

Antaranya, searchValue mewakili subrentetan yang perlu diganti, dan replaceValue mewakili rentetan baharu yang akan diganti. Fungsi replace() boleh menerima dua parameter atau ungkapan biasa sebagai parameter Pada masa ini, ia boleh melaksanakan operasi penggantian rentetan dengan lebih fleksibel.

(1) Gantikan subrentetan tertentu dalam rentetan

Contoh:

var str = "html css javascript";
var newStr = str.replace( " javascript", "java");
console.log(newStr); // html css java

Dalam kod ini, kami mentakrifkan pembolehubah rentetan str dan menggunakan fungsi replace() Gantikan "javascript" dengan "java". Rentetan baharu disimpan dalam pembolehubah newStr dan output ke konsol.

(2) Gantikan berbilang subrentetan dalam rentetan

Jika anda perlu menggantikan berbilang subrentetan dalam rentetan, anda boleh menggunakan ungkapan biasa:

Contoh:

var str = "html css javascript";
var newStr = str.replace(/html|javascript/g, "java");
console.log(newStr); // java css java

Dalam kod ini, kami menggunakan ungkapan biasa /html|javascript/g untuk memadankan "html" dan "javascript" dalam rentetan. Parameter g mewakili padanan global, supaya fungsi replace() boleh menggantikan semua rentetan yang sepadan. Rentetan baru yang diganti masih "java". Hasilnya dipaparkan sebagai "java css java".

2. Senario aplikasi

(1) Ubah suai parameter dalam URL

Dalam pembangunan web, selalunya perlu mengubah suai parameter dalam URL. Katakan anda ingin menukar parameter "page=1" dalam URL kepada "page=2":

Contoh:

var url = "http://www.example.com? name= Lucy&page=1&age=20";
var newUrl = url.replace(/page=1/, "page=2");
console.log(newUrl);

Dalam ini kod , kami menggunakan ungkapan biasa /page=1/ untuk memadankan parameter "page=1" dalam URL. Kemudian, gantikannya dengan "halaman=2", simpan URL baharu dalam pembolehubah Url baharu dan keluarkannya ke konsol. Hasil output ialah "http://www.example.com?name=Lucy&page=2&age=20".

(2) Tapis input pengguna

Dalam aplikasi web, kita selalunya perlu menyemak input pengguna, seperti menapis perkataan sensitif dalam input pengguna. Contoh:

var dirtyStr = "Saya benci awak, awak memang menjengkelkan!";
var cleanedStr = dirtyStr.replace(/hate|annoying/g, "*" ) ;
console.log(cleanedStr);

Dalam contoh ini, kita mula-mula mentakrifkan rentetan dirtyStr yang mengandungi perkataan sensitif. Kemudian, gunakan fungsi replace() dan ungkapan biasa /hate|annoy/g untuk mencari perkataan sensitif ini dan gantikannya dengan "", dan simpan hasilnya dalam pembolehubah cleanedStr. Outputnya ialah "Saya awak, awak memang *!".

3. Ringkasan

Fungsi ganti() JavaScript boleh menggantikan rentetan yang sepadan dengan rentetan baharu dengan cepat, dan merupakan salah satu kaedah pengendalian yang digunakan secara meluas dalam pembangunan bahagian hadapan. Dalam artikel ini, kami memperkenalkan penggunaan asas fungsi replace() dan beberapa senario aplikasi mudah. Dengan mempelajari artikel ini, anda seharusnya dapat menggunakan fungsi replace() dengan lebih mahir untuk melaksanakan operasi penggantian rentetan.

Atas ialah kandungan terperinci Gantikan rentetan input dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn