Làm việc với URL trong JavaScript

Trong JavaScript, đôi khi cần phải làm việc với địa chỉ liên kết. Lớp URL được thiết kế cho việc này, cho phép lấy và thay đổi các phần của địa chỉ.

Hãy xem cách làm việc với nó qua ví dụ địa chỉ sau đây:

javascriptlet path = 'http://site.ru:3000/dir/eee/page.html#show?a=1&b=2&c=3';

Hãy tạo một đối tượng của lớp URL, truyền địa chỉ của chúng ta làm tham số:

javascriptlet url = new URL(path);

Hãy xem đối tượng được tạo có những thuộc tính nào.

Giao thức

Có thể lấy giao thức bằng thuộc tính protocol:

javascriptlet res = url.protocol;
console.log(res); // sẽ in ra 'http://'

Host

Có thể lấy tên miền cùng với cổng bằng thuộc tính host:

javascriptlet res = url.host;
console.log(res); // sẽ in ra 'site.ru:3000'

Tên host

Có thể lấy tên miền bằng thuộc tính hostname:

javascriptlet res = url.hostname;
console.log(res); // sẽ in ra 'site.ru'

Cổng

Có thể lấy cổng bằng thuộc tính port:

javascriptlet res = url.port;
console.log(res); // sẽ in ra '3000'

Đường dẫn

Có thể loại bỏ tên miền để lấy đường dẫn bằng thuộc tính pathname:

javascriptlet res = url.pathname;
console.log(res); // sẽ in ra '/dir/eee/page.html#show?a=1&b=2&c=3'

Hash

Có thể lấy giá trị hash bằng thuộc tính hash:

javascriptlet res = url.hash;
console.log(res); // sẽ in ra 'show'

Tham số GET

Có thể lấy chuỗi tham số GET bằng thuộc tính search:

javascriptlet res = url.search;
console.log(res); // sẽ in ra 'a=1&b=2&c=3'

Có thể lấy tham số GET dưới dạng đối tượng của lớp URLSearchParams bằng thuộc tính searchParams:

javascriptlet res = url.searchParams;
console.log(res); // sẽ in ra đối tượng của lớp URLSearchParams