Kata pengantar
Pertama, kita perlu tahu apa itu pencarian. Pencarian adalah properti dari window.location. Misalnya:
Pertama -tama, kami memiliki URL di sini, yaitu http://www.a.com/list/2.html?page=2&color=4&size=3#pic.
Saat kami mengakses alamat ini, buka konsol, masukkan window.location, dan kami akan mendapatkan hasilnya pada gambar berikut
Seperti disebutkan di atas, apa yang ingin kami operasikan adalah bagian dari kotak dalam gambar di atas.
Mengapa Anda perlu mengoperasikan ini?
Misalnya, jika saya perlu melompat ke halaman ketiga di halaman kedua, saya perlu memperbarui halaman di atas = 2 ke halaman = 3 dan memastikan bahwa parameter lain dipertahankan.
Atau, tidak ada hasil pencarian pada awalnya (seperti halaman pertama dari daftar umum, tidak ada apa -apa), tetapi sekarang saya perlu menambahkan halaman = 2.
Selanjutnya, saya perlu tahu halaman mana yang saya hadapi sekarang, yaitu, saya perlu mendapatkan nilai halaman.
Jadi, pencarian diperlukan. Sekarang kita dipisahkan dari ujung depan dan belakang, pencarian adalah metode yang sangat penting untuk konfigurasi parameter.
Metode konstruksi
Dapatkan nilai parameter yang ditentukan dalam pencarian
Ambil Baidu dan kami menemukan metode berikut:
fungsi getQueryString (name) {var reg = regexp baru ("(^| &)" + name + "= ([^&]*) (& | $)"); var r = window.location.search.substr (1) .match (reg); if (r! = null) return uncape (r [2]); return null;}Metode Sumber: Metode untuk mendapatkan parameter batang alamat menggunakan JS
Metode fungsi penuh
Awalnya saya ingin menulis ide implementasi, tetapi saya tidak bisa mengingatnya untuk sementara waktu, jadi saya langsung memberikannya ke metode terakhir:
fungsi funcurl (name, value, type) {var loca = window.location; var baseUrl = type == tidak ditentukan? loca.origin + loca.pathname + "?" : ""; var kueri = loca.search.substr (1); // Jika tidak ada transmisi parameter, nilai pencarian kembali tidak berisi tanda tanya jika (name == tidak terdefinisi) {return kueri} // Jika tidak ada nilai transmisi, kembalikan nilai parameter untuk menjadi kueri jika (value == tidak didefinisikan) {var val = "guerch). +"= ([^&]*) (& | $)")); return val! = null? unescape (val [2]): null;}; var url; if (query == "") {// Jika tidak ada nilai pencarian, kembalikan urlurl dengan parameter yang ditambahkan = baseUrl + name + "=" + nilai;} else {// jika tidak ada nilai pencarian, modifikasi nilai yang sesuai di dalamnya dan deduplicate; query.split ("&"); for (var i = 0; i <arr.length; i ++) {arr [i] = arr [i] .split ("="); obj [arr [i] [0]] = arr [i] [1];}; obj [nama] = value; url = baseurl+[1]; Json.stringify (obj) .replace (/[/"/{/}]/g," "). Ganti (//:/g," = "). Ganti (//,/g," & ");}; kembalikan url;}Cara menggunakan
funcurl () Mendapat nilai pencarian lengkap (tidak termasuk tanda tanya)
funcurl (nama) Mengembalikan nilai nama dalam url (mengintegrasikan paragraf sebelumnya dari metode orang lain)
funcurl (name, value) Tetapkan nilai nama dalam pencarian ke nilai dan mengembalikan URL lengkap
Kembalikan konten seperti http://www.a.com/list/2.html?page=2&color=4&size=3#pic
funcurl (nama, nilai, ketik) berfungsi sama dengan item ketiga, tetapi ini hanya mengembalikan string pencarian yang diperbarui
Jenisnya di sini dapat berupa karakter apa pun, seperti 1;
Halaman Contoh Konten Mengembalikan = 2 & Warna = 4 & Ukuran = 3;
Umumnya digunakan untuk mendapatkan parameter dari URL dan kemudian berlabuh di antarmuka
ringkasan
Saya awalnya ingin menemukan plug-in yang sudah jadi untuk digunakan, tetapi terlalu besar untuk dipahami atau tidak mudah digunakan. Tentu saja, itu terutama karena level saya terlalu buruk.
Jadi saya membuat roda untuk bermain dengannya. Meskipun kodenya tidak cukup elegan, itu masih memenuhi kebutuhan saya. Jika Anda memiliki saran yang lebih baik, tinggalkan saya pesan.
Faktanya, ini terutama digunakan dengan Vue, tetapi tidak ada konten Vue di sini, jadi tidak dianggap serangkaian tutorial untuk Vue.
Di atas adalah deskripsi lengkap dari beberapa metode dan fungsi pencarian dalam URL operasi JavaScript yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!