😚 ☺️ 👩🏼‍🤝‍👨🏾 Bagaimana cara mengurai URL di JavaScript? 👜 🐜 👧🏻

Selamat siang teman!

Untuk perhatian Anda, saya persembahkan terjemahan dari posting "Bagaimana Mengurai URL dalam JavaScript: nama host, nama jalur , kueri, hash" oleh Dmitri Pavlutin.

Uniform Resource Locator atau singkatnya URL adalah tautan ke sumber daya web (halaman web, gambar, file). URL menentukan lokasi sumber daya dan cara menerimanya - protokol (http, ftp, mailto).

Misalnya, inilah URL untuk artikel ini:

https://dmitripavlutin.com/parse-url-javascript

Seringkali perlu untuk mengambil elemen tertentu dari URL. Ini bisa berupa nama host (nama host, dmitripavlutin.com) atau nama jalur (nama jalur, /parse-url-javascript).

Cara mudah untuk mendapatkan masing-masing komponen URL adalah dengan konstruktor URL().

Pada artikel ini, kita akan membahas tentang struktur dan komponen utama URL.

1. Struktur URL

Sebuah gambar memiliki makna ribuan kata. Pada gambar di atas, Anda dapat melihat komponen utama dari URL:

2. Pembuat URL ()

Konstruktor URL()adalah fungsi yang memungkinkan Anda mengurai (mengurai) komponen URL:

const url = new URL(relativeOrAbsolute [, absoluteBase])

Argumennya relativeOrAbsolutebisa berupa URL absolut atau relatif. Jika argumen pertama adalah link relatif, maka argumen kedua ,, absoluteBasediperlukan dan merupakan URL absolut yang menjadi dasar argumen pertama.

Misalnya, mari kita inisialisasi URL()dengan URL absolut:

const url = new URL('http://example.com/path/index.html')

url.href // 'http://example.com/path/index.html'

Sekarang mari kita gabungkan URL relatif dan absolut:

const url = new URL('/path/index.html', 'http://example.com')

url.href // 'http://example.com/path/index.html'

Properti hrefinstance URL()mengembalikan string URL yang diteruskan.

Setelah membuat sebuah instance URL(), Anda dapat mengakses komponen URL. Sebagai referensi, berikut adalah antarmuka instance URL():

interface URL {
  href:     USVString;
  protocol: USVString;
  username: USVString;
  password: USVString;
  host:     USVString;
  hostname: USVString;
  port:     USVString;
  pathname: USVString;
  search:   USVString;
  hash:     USVString;

  readonly origin: USVString;
  readonly searchParams: URLSearchParams;

  toJSON(): USVString;
}

Di sini, ketik USVStringberarti JavaScript harus mengembalikan string.

3. String kueri

Properti url.searchmemungkinkan Anda untuk mendapatkan string kueri URL yang dimulai dengan awalan ?:

const url = new URL(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.search // '?message=hello&who=world'

Jika tidak ada string kueri, ia url.searchmengembalikan string kosong (''):

const url1 = new URL('http://example.com/path/index.html')
const url2 = new URL('http://example.com/path/index.html?')

url1.search // ''
url2.search // ''

3.1. Parsing (parsing) string kueri

Alih-alih mendapatkan string kueri asli, kita bisa mendapatkan parameternya.

Cara mudah untuk melakukannya disediakan oleh properti url.searchParams. Nilai properti ini adalah turunan dari antarmuka URLSeachParams.

Objek URLSearchParamsmenyediakan banyak metode untuk bekerja dengan parameter string kueri ( get(param), has(param)dan seterusnya).

Mari kita ambil contoh:

const url = new Url(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.searchParams.get('message') // 'hello'
url.searchParams.get('missing') // null

url.searchParams.get('message')mengembalikan nilai parameter messagestring kueri.

Mengakses parameter yang tidak ada akan url.searchParams.get('missing')mengembalikan null.

4. Hostname (nama host)

Nilai properti url.hostnameadalah nama host dari URL:

const url = new URL('http://example.com/path/index.html')

url.hostname // 'example.com'

5. Jalur (nama jalur)

Properti url.pathnameberisi jalur URL:

const url = new URL('http://example.com/path/index.html?param=value')

url.pathname // '/path/index.html'

Jika URL tidak memiliki jalur, itu url.pathnamemengembalikan karakter /:

const url = new URL('http://example.com/');

url.pathname; // '/'

6. Hash

Terakhir, hash dapat diperoleh melalui properti url.hash:

const url = new URL('http://example.com/path/index.html#bottom')

url.hash // '#bottom'

Jika tidak ada hash, itu url.hashmengembalikan string kosong (''):

const url = new URL('http://example.com/path/index.html')

url.hash // ''

7. Memeriksa (memvalidasi) URL

Memanggil konstruktor new URL()tidak hanya membuat instance, tetapi juga memvalidasi URL yang diteruskan. Jika URL tidak valid, itu akan dibuang TypeError.

Misalnya, http ://example.combukan URL yang valid karena httpada spasi setelahnya .

Mari coba gunakan URL ini:

try {
    const url = new URL('http ://example.com')
} catch (error) {
    error // TypeError, "Failed to construct URL: Invalid URL"
}

Sebagai 'http ://example.com'url yang salah new URL('http ://example.com')lempar seperti yang diharapkan TypeError.

8. Bekerja dengan URL

Properti seperti search, hostname, pathname, hashdapat ditulis.

Sebagai contoh, mari kita ubah nama host dari URL yang ada dari red.commenjadi blue.io:

const url = new URL('http://red.com/path/index.html')

url.href // 'http://red.com/path/index.html'

url.hostname = 'blue.io'

url.href // 'http://blue.io/path/index.html'

Properti origin, searchParamsbersifat hanya baca.

9. Kesimpulan

Konstruktor URL()adalah cara yang sangat mudah untuk mengurai (mengurai) dan memvalidasi URL dalam JavaScript.

new URL(relativeOrAbsolute, [, absoluteBase]mengambil URL absolut atau relatif sebagai parameter pertama. Jika parameter pertama adalah URL relatif, parameter kedua harus berupa URL absolut - basis untuk argumen pertama.

Setelah dibuat URL(), Anda dapat mengakses komponen utama URL:

url.search - string kueri asli
url.searchParams- contoh URLSearchParamsuntuk mendapatkan parameter string kueri
url.hostname - nama host
url.pathname - cara
url.hash - nilai hash

Bagaimana cara mengurai URL di JavaScript?