Cách Lấy Tất Cả Giá Trị Dữ Liệu Từ URL Với JavaScript

Học cách lấy tất cả giá trị dữ liệu từ URL bằng phương thức constructor new URL() của JavaScript.

Giả sử bạn xây dựng chức năng tìm kiếm nội bộ trên website. Để làm đúng, bạn cần truy cập tất cả giá trị dữ liệu của chuỗi URL.

May mắn thay, JavaScript có phương thức constructor new URL() cho phép chuyển URL thành object, cho cái nhìn tổng quan đẹp mắt về mọi thuộc tính và giá trị trong URL.

Để dùng, tạo biến gán giá trị new URL('your-url'). Ví dụ dưới đây tạo object URL dựa trên URL bài viết TechStacker:

const urlData = new URL('https://techstacker.com/how-to-detect-double-clicks-with-vanilla-javascript');

Thử log kết quả:

console.log(urlData)

Object URL trả về sẽ trông như sau:

var url = { hash: "", host: "techstacker.com", hostname: "techstacker.com", href: "https://techstacker.com/,how-to-detect-double-clicks-with-vanilla-javascript", origin: "https://techstacker.com", password: "", pathname: "/how-to-detect-double-clicks-with-vanilla-javascript" port: "", protocol: "https:", search: "", searchParams: "URLSearchParams {}", username: "" };

Bây giờ bạn dễ dàng truy cập từng thuộc tính. Ví dụ, lấy pathname của URL:

console.log(url.pathname) // In: "/how-to-detect-double-clicks-with-vanilla-javascript"