Cara Mendapatkan Parameter URL Dengan JavaScript

Parameter URL (juga dikenali sebagai parameter rentetan pertanyaan atau pembolehubah URL) digunakan untuk menghantar sejumlah kecil data antara halaman atau antara klien dan pelayan melalui URL. Mereka boleh mengandungi pelbagai maklumat berguna seperti pertanyaan carian, cadangan pautan, maklumat produk, keutamaan pengguna, dan banyak lagi.

Artikel ini akan menunjukkan kepada anda bagaimana untuk menghuraikan dan memanipulasi parameter URL menggunakan JavaScript.

mata utama

• Parameter URL, atau parameter rentetan pertanyaan, digunakan untuk menghantar sedikit data antara halaman atau antara pelanggan dan pelayan melalui URL, dan boleh mengandungi maklumat berguna seperti pertanyaan carian, cadangan pautan, maklumat produk, keutamaan pengguna dan lain -lain.
• Antara muka UrlSearchParams dalam pelayar moden membolehkan parsing mudah dan manipulasi parameter URL, termasuk: get() untuk mengembalikan nilai pertama yang berkaitan dengan parameter carian yang diberikan; Digunakan untuk mengembalikan semua nilai yang berkaitan dengan parameter tertentu. has() getAll() Untuk pelayar yang lebih tua, polyfill boleh digunakan, atau pemaju boleh membuat fungsi parsing rentetan pertanyaan mereka sendiri yang menerima rentetan pertanyaan URL dan mengembalikan data dalam format objek.
• Adalah penting untuk diperhatikan bahawa format parameter URL tidak jelas dan mungkin berbeza, dan pemaju harus menguji dan menyesuaikan kod berdasarkan kes penggunaan tertentu. Sekiranya anda perlu memanipulasi URL dengan lebih kompleks, anda boleh menggunakan perpustakaan tertentu seperti pertanyaan dan medialize uri.js.

Dapatkan parameter URL

Ini telah menjadi lebih mudah dalam pelayar moden, terima kasih kepada antara muka UrlSearchParams. Ia mentakrifkan satu siri kaedah utiliti untuk mengendalikan rentetan pertanyaan untuk URL.

Katakan URL kami adalah

, kita boleh menggunakan

untuk mendapatkan rentetan pertanyaan: https://example.com/?product=shirt&color=blue&newuser&size=m window.location.search

maka kita dapat menghuraikan parameter rentetan pertanyaan menggunakan urlsearchParams:

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

kita boleh memanggil mana -mana kaedahnya mengenai hasilnya.

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

Sebagai contoh,

akan mengembalikan nilai pertama yang dikaitkan dengan parameter carian yang diberikan:

URLSearchParams.get()

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

Kaedah berguna lain

periksa sama ada parameter wujud

anda boleh menggunakan

untuk memeriksa sama ada parameter tertentu wujud:

URLSearchParams.has()

Dapatkan semua nilai parameter

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

anda boleh menggunakan

untuk mengembalikan semua nilai yang berkaitan dengan parameter tertentu:

URLSearchParams.getAll()

parameter lelaran

<code class="language-javascript">console.log(urlParams.getAll('size'));
// ['m']

// 以编程方式添加第二个size参数。
urlParams.append('size', 'xl');

console.log(urlParams.getAll('size'));
// ['m', 'xl']</code>

urlSearchParams juga menyediakan beberapa kaedah Iterator objek yang biasa digunakan yang membolehkan anda melelehkan kekunci, nilai, dan penyertaannya:

<code class="language-javascript">const keys = urlParams.keys(),
      values = urlParams.values(),
      entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for (const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m</code>

Sokongan penyemak imbas

Sokongan penyemak imbas untuk UrlSearchParams adalah baik. Pada masa penulisan, ia disokong oleh semua pelayar utama.

Jika anda mesti menyokong penyemak imbas yang lebih tua (seperti Internet Explorer), anda boleh menggunakan polyfill. atau , anda boleh terus membaca sisa tutorial ini dan belajar bagaimana menulis sendiri.

Menulis fungsi parsing rentetan pertanyaan anda sendiri

mari kita terus menggunakan URL yang digunakan dalam bahagian sebelumnya:

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

Ini adalah fungsi yang menyediakan semua parameter URL sebagai objek ringkas:

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

anda akan melihat bagaimana ia berfungsi tidak lama lagi, tetapi pertama, berikut adalah beberapa contoh penggunaan:

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

(bahagian demonstrasi codepen ditinggalkan di sini kerana kod codepen tidak dapat disematkan secara langsung)

perkara yang perlu diketahui sebelum menggunakan fungsi ini

• Fungsi kami mengandaikan bahawa parameter dipisahkan oleh aksara &, seperti yang ditunjukkan dalam spesifikasi W3C. Walau bagaimanapun, format parameter URL biasanya tidak ditakrifkan dengan baik, jadi anda kadang -kadang boleh melihat ; atau & sebagai pembatas.
• Jika parameter tidak mempunyai tanda yang sama atau mempunyai tanda yang sama tetapi tiada nilai, fungsi kami masih sah.
• Nilai parameter berulang akan diletakkan dalam array.

Jika anda hanya memerlukan fungsi yang boleh anda masukkan ke dalam kod anda, maka sudah selesai sekarang. Sekiranya anda ingin memahami bagaimana fungsi berfungsi, baca terus.

Bahagian seterusnya mengandaikan bahawa anda memahami beberapa JavaScript, termasuk fungsi, objek, dan tatasusunan. Jika anda memerlukan ulasan, lihat rujukan MDN JavaScript.

bagaimana fungsi berfungsi

Secara umum, fungsi ini mengambil rentetan pertanyaan URL (bahagian selepas tanda tanya ? dan sebelum tanda pound #) dan mengeluarkan data dalam bentuk objek ringkas.

Pertama sekali, baris kod ini bermaksud bahawa jika kita menentukan URL, kita mendapat segala -galanya selepas tanda tanya, jika tidak, gunakan URL tetingkap:

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

Seterusnya, kami akan membuat objek untuk menyimpan parameter kami:

<code class="language-javascript">console.log(urlParams.getAll('size'));
// ['m']

// 以编程方式添加第二个size参数。
urlParams.append('size', 'xl');

console.log(urlParams.getAll('size'));
// ['m', 'xl']</code>

Jika rentetan pertanyaan wujud, kita akan mula menghirupnya. Pertama, kita perlu pastikan untuk mengeluarkan bahagian yang bermula dengan #, kerana ia bukan sebahagian daripada rentetan pertanyaan:

<code class="language-javascript">const keys = urlParams.keys(),
      values = urlParams.values(),
      entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for (const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m</code>

Sekarang kita boleh memecah rentetan pertanyaan ke dalam komponennya:

<code>http://example.com/?product=shirt&color=blue&newuser&size=m</code>

ini akan memberi kita array seperti yang ditunjukkan di bawah:

<code class="language-javascript">function getAllUrlParams(url) {
  // 从url（可选）或窗口获取查询字符串
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

  // 我们将在这里存储参数
  var obj = {};

  // 如果存在查询字符串
  if (queryString) {
    // #后面的内容不是查询字符串的一部分，所以去掉它
    queryString = queryString.split('#')[0];

    // 将查询字符串拆分为其组成部分
    var arr = queryString.split('&');

    for (var i = 0; i < arr.length; i++) {
      // 分离键和值
      var a = arr[i].split('=');

      // 设置参数名称和值（如果为空则使用'true'）
      var paramName = a[0];
      var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

      // （可选）保持大小写一致
      paramName = paramName.toLowerCase();
      if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

      // 如果paramName以方括号结尾，例如colors[]或colors[2]
      if (paramName.match(/\[(\d+)?\]$/)) {
        // 如果不存在，则创建键
        var key = paramName.replace(/\[(\d+)?\]/, '');
        if (!obj[key]) obj[key] = [];

        // 如果它是索引数组，例如colors[2]
        if (paramName.match(/\[\d+\]$/)) {
          // 获取索引值并在适当的位置添加条目
          var index = /\[(\d+)\]/.exec(paramName)[1];
          obj[key][index] = paramValue;
        } else {
          // 否则将值添加到数组的末尾
          obj[key].push(paramValue);
        }
      } else {
        // 我们正在处理字符串
        if (!obj[paramName]) {
          // 如果不存在，则创建属性
          obj[paramName] = paramValue;
        } else if (obj[paramName] && typeof obj[paramName] === 'string') {
          // 如果属性存在并且是字符串，则将其转换为数组
          obj[paramName] = [obj[paramName]];
          obj[paramName].push(paramValue);
        } else {
          // 否则添加属性
          obj[paramName].push(paramValue);
        }
      }
    }
  }

  return obj;
}</code>

Seterusnya kita akan melangkah ke atas array ini dan memecah setiap item ke dalam kunci dan nilai, yang akan kami masukkan ke dalam objek kami:

<code class="language-javascript">getAllUrlParams().product; // 'shirt'
getAllUrlParams().color; // 'blue'
getAllUrlParams().newuser; // true
getAllUrlParams().nonexistent; // undefined
getAllUrlParams('http://test.com/?a=abc').a; // 'abc'</code>

mari kita memberikan kunci dan nilai kepada pembolehubah tunggal. Sekiranya tiada nilai parameter, kami akan menetapkannya kepada true untuk menunjukkan bahawa nama parameter wujud. Anda boleh menukar tetapan ini seperti yang anda suka mengikut kes penggunaan anda:

<code class="language-javascript">var queryString = url ? url.split('?')[1] : window.location.search.slice(1);</code>

Pilihan, anda boleh menetapkan semua nama dan nilai parameter kepada huruf kecil. Dengan cara ini, anda boleh mengelakkan situasi di mana seseorang menghantar lalu lintas ke URL, seperti example=TRUE bukan example=true dan skrip anda pecah. (Saya telah melihat ini berlaku.) Walau bagaimanapun, jika rentetan pertanyaan anda perlu sensitif kes, anda boleh meninggalkan bahagian ini mengikut kehendak:

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

Seterusnya, kita perlu memproses pelbagai jenis input yang boleh kita terima dalam paramName. Ini boleh menjadi array yang diindeks, array yang tidak diindeks, atau rentetan biasa.

Jika ia adalah array indeks, kami mahu paramValue sepadan menjadi array dan masukkan nilai ke dalam kedudukan yang betul. Jika ia adalah array yang tidak diindeks, kami mahu paramValue sepadan menjadi array dan menolak unsur-unsur ke dalamnya. Sekiranya ia adalah rentetan, kami ingin membuat harta tetap pada objek dan menyerahkan paramValue kepadanya, melainkan jika harta sudah ada, dalam hal ini kami ingin menambah yang sedia ada ditukar ke array dan Tolak lulus paramValue ke dalam array itu. paramValue

Untuk menggambarkan ini, berikut adalah beberapa contoh input, dan output yang kami harapkan:

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

ini adalah kod yang melaksanakan fungsi ini:

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

Akhirnya, kami mengembalikan objek kami yang mengandungi parameter dan nilai.

Jika URL anda mempunyai watak khas yang dikodkan, seperti ruang (dikodkan sebagai

), anda juga boleh menyahkod mereka untuk mendapatkan nilai asal seperti yang ditunjukkan di bawah:

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

berhati -hati untuk tidak menyahkodkan apa yang telah disahkod atau skrip anda akan salah, terutamanya jika peratusan terlibat.

Bagaimanapun, tahniah! Sekarang anda tahu bagaimana untuk mendapatkan parameter URL dan berharap dapat mempelajari petua lain di sepanjang jalan.

Kesimpulan

Kod dalam artikel ini sesuai untuk kes penggunaan yang paling biasa di mana anda mendapat parameter pertanyaan URL. Sekiranya anda berurusan dengan mana -mana kes kelebihan, seperti pemisah yang tidak biasa atau format khas, pastikan anda menguji dan menyesuaikan dengan sewajarnya.

Jika anda ingin berbuat lebih banyak dengan URL, anda boleh menggunakan perpustakaan tertentu seperti pertanyaan-string dan medialize uri.js. Walau bagaimanapun, kerana pada dasarnya ia adalah operasi rentetan, ia lebih masuk akal untuk menggunakan JavaScript tulen secara umum. Sama ada anda menggunakan kod anda sendiri atau menggunakan perpustakaan, pastikan anda menyemak segala -galanya dan pastikan ia berfungsi untuk kes penggunaan anda.

Jika anda suka bermain dengan rentetan, lihat artikel kami mengenai pemisahan rentetan ke dalam substrings, menukar rentetan ke dalam nombor, dan menukar nombor ke dalam rentetan dan nombor ordinal. Untuk pengetahuan JavaScript yang lebih mendalam, baca buku kami "JavaScript: Dari Newbie ke Ninja, Edisi Kedua".

(bahagian Soalan Lazim ditinggalkan di sini kerana kandungannya sangat diduplikasi dari teks)

Atas ialah kandungan terperinci Cara Mendapatkan Parameter URL Dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!