Làm cách nào để lấy giá trị từ URL trong JavaScript?

Trong một URL, các giá trị chuỗi truy vấn thường cung cấp thông tin về yêu cầu, chẳng hạn như tham số cho tìm kiếm hoặc ID của đối tượng bạn đang sử dụng. Nếu bất kỳ logic yêu cầu hoặc nghiệp vụ nào được xử lý ở giao diện người dùng, điều quan trọng là phải biết cách truy xuất các giá trị chuỗi truy vấn từ URL. Có một số cách để đạt được điều này, một vài trong số đó chúng ta sẽ thấy ở đây

URLTìm kiếmThông số

Giao diện URLSearchParams được hỗ trợ bởi tất cả các phiên bản trình duyệt chính ngoại trừ IE 11. Nó hoạt động bằng cách phân tích cú pháp chuỗi truy vấn của một URL và cung cấp cách truy cập các giá trị. Ví dụ

Một trong những nhược điểm của giao diện này là bạn chỉ phải truyền cho nó chuỗi truy vấn của một URL. Nếu bạn đang làm việc với URL trình duyệt hiện tại, điều đó rất dễ thực hiện vì bạn chỉ cần chuyển window.location.search. Nếu bạn đang làm việc với bất kỳ URL nào khác, bạn sẽ cần phân tích cú pháp và chuyển chuỗi truy vấn một cách riêng biệt

Để phân tích cú pháp các tham số truy vấn thành một đối tượng, hãy sử dụng phương thức .entries() của URL.searchParams, trả về một Iterator cặp khóa/giá trị và Object.fromEntries để chuyển đổi nó thành một đối tượng

Đối tượng URL

API URL cũng được hỗ trợ bởi tất cả các phiên bản trình duyệt chính ngoại trừ IE 11. Nó cung cấp một cách linh hoạt hơn để phân tích cú pháp URL và nó cũng cung cấp một cách để truy cập các giá trị chuỗi truy vấn. Ví dụ

url.searchParams là cùng một loại đối tượng thể hiện được trả về bởi URLSearchParams

Đối tượng URLSearchParams0 ở trên cũng có tất cả các phần của URL được chia thành các phần của nó. Ví dụ

JavaScript thuần túy

Nếu vì bất kỳ lý do gì mà bạn không thể truy cập các API ở trên hoặc muốn có nhiều quyền kiểm soát hơn đối với việc phân tích cú pháp, bạn có thể sử dụng đoạn mã sau để phân tích cú pháp chuỗi truy vấn thành một đối tượng

function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

Ghi chú. Có nhiều cách để phân tích các tham số truy vấn trong JS đơn giản, một số phức tạp hơn (và mạnh mẽ) hơn các cách khác. Đây chỉ là một cách, và được điều chỉnh từ ý chính này

Phương thức “split()” tách một chuỗi đã cho thành một mảng các chuỗi con mà không có bất kỳ thay đổi nào trong chuỗi ban đầu. Phương pháp này có thể được áp dụng cho một URL nhất định trong hai phần và vòng lặp for có thể được sử dụng để kiểm soát phép lặp với sự trợ giúp của thuộc tính độ dài để nhận tất cả các giá trị tham số

cú pháp

chuỗi. tách( dấu phân cách, giới hạn )

Ở đây, “dấu phân cách” chỉ chuỗi cần được tách và “giới hạn” là một số thể hiện giới hạn tách

Xem ví dụ sau để hiểu khái niệm đã nêu

Thí dụ

Trong ví dụ dưới đây, chúng tôi sẽ tạo một nút và đính kèm một sự kiện onclick với nó sẽ truy cập chức năng “getParameters()”

< nhấp vào nút = "getParameters()"> Get URL parameters value button>

Bây giờ, chúng ta sẽ định nghĩa hàm getParameters(). Theo định nghĩa của nó, một URL của miền ví dụ được thêm vào sẽ được truy cập và lưu trữ trong một biến có tên “getUrl”. Tiếp theo, URL được chỉ định sẽ được chia thành hai phần bằng cách sử dụng “?”

Sau đó, vòng lặp “for” sẽ được áp dụng theo cách mà mỗi tham số và giá trị của nó sẽ được hiển thị trên bảng điều khiển

hàm getParameter () {
let getUrl = "https. //thí dụ. com/?product=shirt&color=white&user=anonymous&size=s";
let getParameters = getUrl. tách('?')[1];
letparams = getParameters. tách('&');
for( let i = 0; i <params.độ dài; i ++) {
letvalue = tham số [ i ].tách('==');
   bảng điều khiển. log( giá trị [0], value[1]);
  }
  }

Đầu ra của việc thực hiện trên sẽ có kết quả như sau

Đó là tất cả về việc truy cập tất cả các giá trị tham số cùng một lúc. Tuy nhiên, nếu bạn muốn lấy giá trị của một tham số cụ thể, hãy chuyển sang phần tiếp theo

Phương pháp 2. Nhận giá trị tham số URL trong JavaScript với đối tượng URLSearchParams

“URLSearchParams” cũng có thể được sử dụng để lấy URL được chỉ định bằng cách sử dụng một đối tượng và tìm nạp một giá trị cụ thể đối với thuộc tính tương ứng

Đi qua ví dụ sau để chứng minh thêm

Thí dụ

Đầu tiên, bao gồm một nút có sự kiện “onclick” sẽ truy cập vào chức năng được chỉ định như đã thảo luận trong phương pháp trước

< loại đầu vào = "nút" giá trị< = "Get URL parameter value" onclick= "urlParameter()">

Tiếp theo, một hàm có tên urlParameter() sẽ được định nghĩa. Tại đây, một đối tượng mới có tên là “URLSearchParams” được tạo, đối tượng này sẽ truy cập url được chỉ định tham chiếu đến miền ví dụ. Cuối cùng, hiển thị tất cả các giá trị tương ứng với thuộc tính được chỉ định. Trong trường hợp của chúng ta,

Tham số url chức năng (){

let getUrl = new URLSearchParams ("https://example.com/?product=shirts&color=white&user=anonymous&size=s")

bảng điều khiển. log( getUrl. lấy('người dùng'));

}

đầu ra

Trong đầu ra ở trên, có thể thấy rằng giá trị “ẩn danh” được tìm nạp cho tham số “người dùng”

Chúng tôi đã minh họa các phương pháp khác nhau để nhận các giá trị tham số URL trong JavaScript

Phần kết luận

Để lấy giá trị tham số URL trong JavaScript, hãy sử dụng phương thức “split()” với vòng lặp “for” để phân tách URL đã chỉ định, tách từng giá trị tham số và hiển thị chúng bằng cách thêm điều kiện bắt buộc vào các thuộc tính tương ứng của chúng. Ngoài ra, có thể sử dụng phương thức đối tượng “URLSearchParams” để tạo một đối tượng mới và trích xuất giá trị của một thuộc tính cụ thể. Bài viết này đã trình bày các phương pháp để lấy các giá trị tham số URL trong JavaScript

Làm cách nào để lấy giá trị của URL trong JavaScript?

Làm cách nào để lấy giá trị từ URL trong HTML?

Làm cách nào để chuyển tham số URL trong JavaScript?

Làm cách nào tôi có thể lấy tham số từ chuỗi URL?