Phân tích URL _

Phân tích URL hoạt động như thế nào?

Bộ phân tích chạy theo chuẩn WHATWG URL, cùng thuật toán trình duyệt dùng cho mọi href. Chúng tôi truyền chuỗi vào hàm khởi tạo URL gốc và đọc lại từng thành phần dưới dạng thuộc tính.

1. Kiểm tra đầu vào. Chuỗi rỗng hiển thị thông báo đầu vào trống. Ngược lại, chúng tôi truyền văn bản vào new URL(text); lỗi TypeError nghĩa là chuỗi không phải URL tuyệt đối hợp lệ.
2. Đọc các thành phần cấu trúc. Chúng tôi đọc protocol, username, password, host, hostname, port, pathname, search, hash và origin từ đối tượng URL. Mỗi thành phần nằm ở hàng riêng để bạn có thể sao chép độc lập.
3. Duyệt chuỗi truy vấn. Chúng tôi lặp qua url.searchParams.entries() và hiển thị một hàng bảng mỗi khóa. Giá trị thô nằm cạnh decodeURIComponent(value) để các phần mã hóa phần trăm (khoảng trắng, dấu cộng, Unicode) có thể đọc bình thường.
4. Tái tạo theo yêu cầu. Chỉnh sửa ô bất kỳ, xóa hàng hoặc thêm tham số mới, rồi nhấn Tái tạo URL. Công cụ xây dựng lại đối tượng URL từ các chỉnh sửa và ghi kết quả trở lại ô nhập.
5. Chế độ trực tiếp. Bật chế độ trực tiếp và mỗi lần gõ phím sẽ phân tích lại URL với độ trễ 150 ms. Hữu ích khi bạn dán các đoạn từ log và muốn phản hồi ngay lập tức.

Tại sao nên phân tích URL trong trình duyệt?

• Không có gì rời khỏi thẻ. URL chứa token, ID phiên, trạng thái OAuth và tham số truy vấn đã ký mà bạn không muốn dịch vụ bên thứ ba lưu giữ. Bộ phân tích này sử dụng cùng thuật toán URL mà trình duyệt của bạn chạy cục bộ — không tải lên, không gọi mạng.
• Khớp với những gì mã của bạn thấy. Node.js, Deno, các trình duyệt hiện đại và Cloudflare Workers đều dùng cài đặt WHATWG URL. Kiểm tra URL ở đây cho bạn cùng kết quả phân tách thành phần như lời gọi new URL(input) trong môi trường sản xuất.
• Đọc chuỗi truy vấn theo cách con người hiểu. Giá trị thô và đã giải mã nằm cạnh nhau, vì vậy cặp q=hello%20world hiển thị cả byte trên dây lẫn văn bản đọc được hello world trong một lần nhìn. Không cần giải mã URL bằng tay.
• Chỉnh sửa hai chiều. Xóa tham số tracking, sửa lỗi đánh máy trong đường dẫn, đổi cổng — rồi tái tạo URL. Đầu ra đi qua hàm khởi tạo URL để phát hiện lỗi trước khi bạn sao chép.

Ứng dụng phổ biến

Phân tích URL xuất hiện trong công việc hàng ngày của lập trình viên, bảo mật và phân tích khi URL không chỉ đơn thuần là một liên kết.

• Gỡ lỗi điểm cuối API: xác nhận URL cơ sở, đường dẫn và tham số truy vấn trước khi gửi yêu cầu curl hoặc Postman.
• Kiểm tra tham số tracking: liệt kê mọi UTM, gclid, fbclid hoặc khóa chiến dịch trên URL trang đích và quyết định giữ cái nào.
• Xác nhận liên kết affiliate và đối tác: dán deeplink, xác nhận host đích và mục tiêu chuyển hướng nhúng trước khi xuất bản.

Ví dụ thực tế

Dán https://example.com/search?q=hello%20world&lang=en vào ô nhập. Giao thức hiển thị https:, tên máy chủ hiển thị example.com, đường dẫn hiển thị /search, và tìm kiếm hiển thị ?q=hello%20world&lang=en. Bảng truy vấn hiển thị hai hàng: q với giá trị thô hello%20world và giá trị đã giải mã hello world, rồi lang với cả giá trị thô và giải mã là en. Nhấp Xóa ở hàng lang, rồi Tái tạo URL — ô nhập cập nhật thành https://example.com/search?q=hello%20world.

FAQ

Bộ phân tích URL là gì?

Bộ phân tích URL nhận một chuỗi URL và phân tách nó thành các thành phần có tên: giao thức (https), thông tin người dùng (tên người dùng, mật khẩu), host (tên máy chủ cộng cổng tùy chọn), đường dẫn, chuỗi truy vấn và fragment. Nó cũng giải mã từng tham số truy vấn để các giá trị mã hóa phần trăm (như %20 cho khoảng trắng) có thể đọc được. Bộ phân tích ở đây sử dụng chuẩn WHATWG URL, cùng chuẩn mà trình duyệt của bạn dùng để tải trang.

Sự khác biệt giữa host và hostname là gì?

Hostname chỉ là tên miền (hoặc địa chỉ IP) — với example.com:8080 thì hostname là example.com. Host là hostname cộng cổng khi có cổng không mặc định, vì vậy cùng URL đó có host là example.com:8080. Với URL ở cổng mặc định (443 cho https, 80 cho http) thì host và hostname giống nhau.

Việc giải mã có tự động xảy ra không?

Các thành phần cấu trúc (giao thức, tên máy chủ, cổng, đường dẫn) được đọc trực tiếp từ đối tượng URL mà không cần giải mã thêm — hàm khởi tạo URL đã chuẩn hóa chúng. Giá trị truy vấn được hiển thị hai lần: chuỗi mã hóa phần trăm thô như trong search, và giá trị đã giải mã do decodeURIComponent tạo ra. Như vậy bạn có thể sao chép dạng nào phù hợp với công cụ kế tiếp.

Tôi có thể chỉnh sửa và tái tạo URL không?

Có. Mọi ô phần và ô tham số truy vấn đều có thể chỉnh sửa. Thêm hoặc xóa hàng truy vấn bằng nút Thêm và Xóa, rồi nhấn Tái tạo URL từ các phần. Công cụ đưa các chỉnh sửa của bạn qua hàm khởi tạo URL và ghi kết quả vào ô nhập — nếu các chỉnh sửa tạo ra URL không hợp lệ, bạn nhận được cùng thông báo lỗi như khi gọi new URL() trong mã của bạn.

Phân tích URL là một trong những công việc nhỏ mà mọi lập trình viên web thực hiện hàng tuần. Làm điều đó trong trình duyệt, với cùng thuật toán mà mã sản xuất sử dụng, giúp công việc nhanh chóng và dữ liệu ở trên máy của bạn.