Kaedah rentetan JS replace()

Pengenalan

Kaedah string replace() biasanya dipelajari oleh pelajar Javascript pada awal pengajian mereka, tetapi hanya bentuk penggunaan asas yang diliputi pada masa itu dan topik itu biasanya tidak dilawati semula kemudian. Akibatnya, banyak pembangun Javascript hanya menggunakannya dalam bentuk yang paling asas.

Penggunaan Asas

Penggunaan asas replace() melibatkan menghantar dua rentetan. Yang pertama ialah rentetan yang sedang diganti, dan yang kedua ialah rentetan yang digunakan untuk menggantikannya.

const strOriginal = "The quick brown fox jumps over the lazy dog.";
const strReplaced = strOriginal.replace("jumps", "flies");
console.log(strReplaced);

Itu menghasilkan output ini:

The quick brown fox flies over the lazy dog.

Ungkapan Biasa

Daripada menyediakan rentetan sebagai parameter pertama untuk menggantikan(), ia juga mungkin untuk menyediakan ungkapan biasa.

const strOriginal = "The PIN is 1234."
const strReplaced = strOriginal.replace(/\b\d{4}\b/, "<redacted>");
console.log(strReplaced);//The PIN is <redacted>.

D sepadan dengan digit dan {4} sepadan dengan tepat 4 daripadanya. B pada sempadan perlawanan awal dan akhir. Ini menghalang padanan bahagian nombor yang lebih panjang daripada 4 digit. Dalam penggunaan dunia sebenar, anda mungkin memerlukan kod tambahan untuk membezakan jujukan 4 digit daripada sebahagian daripada nombor telefon atau nombor kad kredit, tetapi saya meninggalkannya, kerana ini tidak bertujuan untuk menjadi tutorial regex.

Fungsi Pengganti

Parameter kedua kepada kaedah replace() boleh menjadi fungsi. Apa sahaja fungsi yang dikembalikan ini digunakan untuk menggantikan teks dipadankan yang dinyatakan dalam parameter pertama. Ini berfungsi dengan rentetan dan ungkapan biasa yang disediakan sebagai parameter pertama.

Apabila parameter pertama replace() ialah rentetan atau regex tanpa kumpulan tangkapan, fungsi pengganti diluluskan 3 parameter dalam susunan berikut:

1. teks yang dipadankan
2. kedudukan perlawanan
3. rentetan lengkap asal

Jika parameter pertama replace() ialah regex dengan kumpulan tangkapan, parameter kedua dan semua parameter berikutnya, kecuali dua yang terakhir, akan menjadi tangkapan. Yang kedua hingga yang terakhir ialah kedudukan tangkapan pertama dan parameter terakhir ialah rentetan penuh asal.

Jika ungkapan biasa digunakan dengan bendera global, fungsi itu dipanggil sekali untuk setiap perlawanan yang ditemui.

Fungsi pengganti kurang kerap disertai dengan rentetan sebagai parameter pertama replace(), kerana rentetan ialah nilai malar, jadi secara amnya adalah mungkin untuk pra-pengiraan pengganti untuknya. Walau bagaimanapun, ia boleh digunakan dengan rentetan untuk melakukan sesuatu seperti ini:

const names = ["birds", "dogs", "cats", "pandas"];
const str = "We hold these truths to be self-evident, that all <ANIMALS> are created equal."
const strReplaced = str.replace("<ANIMALS>",
    ()=> names[Math.floor(Math.random() * names.length)]
);
console.log(strReplaced);

Ini menggantikan "" dengan rentetan yang dipilih secara rawak daripada tatasusunan nama untuk menghasilkan ayat rawak seperti ini:

We hold these truths to be self-evident, that all dogs are created equal.

Menggabungkan RegEx dengan Fungsi Pengganti

Kuasa sebenar fungsi pengganti datang daripada menggabungkannya dengan ungkapan biasa sebagai parameter pertama replace(). Oleh kerana regex boleh memadankan corak, ia boleh memadankan rentetan yang tidak diketahui terlebih dahulu, jadi fungsi mungkin diperlukan untuk mengendalikan teks yang dipadankan untuk menghasilkan penggantiannya.

Berikut ialah contoh menukar sarung ular kepada sarung unta:

const snakeStr = "my_favorite_variable_name";
function snakeToCamelCase(str) {
    return str.replace(/_(\w)/g, function(_, letter) {
        return letter.toUpperCase();
    });
}
console.log(snakeToCamelCase(snakeStr)); //myFavoriteVariableName

W sepadan dengan satu aksara teks. Ia datang selepas garis bawah dalam regex, jadi ia akan sepadan dengan huruf pertama selepas garis bawah. Tanda kurung digunakan untuk membuat kumpulan tangkapan yang mengandungi hanya huruf ini tanpa garis bawah sebagai sebahagian daripada rentetan. (Adalah mudah untuk hanya mengambil watak kedua perlawanan, tetapi saya ingin menggambarkan kumpulan tangkapan.) Surat ini diterima oleh fungsi pengganti sebagai parameter kedua, dan ia kemudiannya dihuruf besar dan dikembalikan sebagai pengganti untuk keseluruhan subrentetan yang pada asalnya terdiri daripada garis bawah dan huruf, jadi ini memadamkan garis bawah dan menggunakan huruf besar selepasnya.

Berikut ialah satu lagi contoh yang menukar kod warna hex kepada warna rgb.

const css = `body{
    background-color: #88FF00;
    color: #0d2651;
}`;
const hex2RGB = str => str.replace(/#[0-9A-F]{6}/ig,(hex)=>{
    return "rgb(" +
        //skip first character which is #
        parseInt(hex.substring(1,3), 16) +
        ", " +
        parseInt(hex.substring(3,5), 16) +
        ", " +
        parseInt(hex.substring(5,7), 16) +
        ")";
});
console.log(hex2RGB(css));

Output yang terhasil ialah:

body{
    background-color: rgb(136, 255, 0);
    color: rgb(13, 38, 81);
}

Regeks sepadan dengan # diikuti serta-merta dengan tepat 6 digit perenambelasan, yang ditakrifkan sebagai aksara 0 hingga 9 dan A hingga F. Bendera i digunakan untuk mengabaikan huruf besar, jadi ia berfungsi untuk huruf besar dan kecil. Fungsi pengganti mengambil subrentetan daripada kod hex dan menghuraikannya untuk menghasilkan nombor perpuluhan, dan nombor ini diletakkan di antara "rgb(" dan ")" untuk menghasilkan warna rgb().

Kesimpulan

Terdapat banyak cara untuk mengubah suai rentetan sedia ada, tetapi menggunakan kaedah replace() selalunya merupakan pilihan yang baik apabila matlamatnya adalah untuk menggantikan subrentetan berdasarkan kandungan dan bukannya kedudukan. Tanpa itu, penyelesaian biasa melibatkan pencarian kedudukan subrentetan dahulu, diikuti dengan membelah rentetan pada titik itu dan menggabungkan dengan pengganti, dan itu tidak cekap.

Atas ialah kandungan terperinci Kaedah rentetan JS replace(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!