Làm cách nào để nhận URL hiện tại bằng chuỗi truy vấn trong JavaScript?

Trong bài viết này, chúng ta sẽ tìm hiểu cách lấy các tham số URL trong Javascript, cùng với việc tìm hiểu cách triển khai chúng thông qua các ví dụ

Nội dung chính Show

Làm cách nào để lấy URL trang hiện tại bằng chuỗi truy vấn trong JavaScript?
Làm cách nào để có được đường dẫn URL hiện tại trong JavaScript?
Làm cách nào để nhận các tham số URL hiện tại trong JavaScript?
Làm cách nào để kiểm tra xem URL có chuỗi truy vấn trong JavaScript không?

Để lấy thông số URL, có 2 cách

Bằng cách sử dụng Đối tượng URLSearchParams
Bằng cách sử dụng Tách và truy cập từng cặp tham số

Phương pháp 1. Sử dụng đối tượng URLSearchParams

URLSearchParams là một giao diện được sử dụng để cung cấp các phương thức có thể được sử dụng để làm việc với một URL. Đầu tiên, chuỗi URL được tách ra để chỉ lấy phần tham số của URL. Phương thức split() được sử dụng trên URL đã cho với dấu “?” . Nó sẽ tách chuỗi thành 2 phần. Phần thứ hai được chọn chỉ với các tham số. Sau đó, nó được chuyển đến hàm tạo URLSearchParams

Phương thức entry() của đối tượng này trả về một trình vòng lặp với các cặp khóa/giá trị. Sau đó, phần quan trọng của cặp có thể được truy xuất bằng cách truy cập vào chỉ mục đầu tiên của cặp và giá trị có thể được truy xuất bằng cách truy cập vào chỉ mục thứ hai. Điều này có thể được sử dụng để lấy tất cả các tham số trong URL có thể được sử dụng theo yêu cầu

cú pháp

let paramString = urlString.split('?')[1];
let queryString = new URLSearchParams(paramString);

for (let pair of queryString.entries()) {
   console.log("Key is: " + pair[0]);
   console.log("Value is: " + pair[1]);
}

Thí dụ. Ví dụ này minh họa việc sử dụng Đối tượng URLSearchParams để lấy tham số URL

HTML

<!DOCTYPE html>

<html>

<head>

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

0<

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

2>

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

6head>

<<!DOCTYPE html>1>

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

0<___<!DOCTYPE html>5 <!DOCTYPE html>6<!DOCTYPE html>7<!DOCTYPE html>8>

<0<1

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

6<!DOCTYPE html>5<5

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

0<<8>

<0html1

<0html3

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

6<8>

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

0<>0>1

>2

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

6>0>

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

0<>0 1>0>

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

0<___ 7 8<!DOCTYPE html>7<0<1 7>

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

0<<6>

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

0<9

<0head1

head2

<0head4

<0head6

<0head8

head9____27_______0

head9>2

<0>4

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

0>4

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

6<6>

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

6<!DOCTYPE html>1>

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');

for (let i = 0; i < params_arr.length; i++) {
   let pair = params_arr[i].split('=');
   console.log("Key is:", pair[0]);
   console.log("Value is:", pair[1]);
}

6html>

đầu ra

các mục () Phương thức

Phương pháp 2. Tách và truy cập từng cặp tham số

Đầu tiên, chuỗi truy vấn được tách ra để chỉ lấy phần tham số của chuỗi. Phương thức split() được sử dụng trên URL đã cho với dấu “?” . Điều này sẽ tách URL thành 2 phần và phần thứ hai được chọn chỉ với các tham số. Chuỗi này được tách thành các tham số bằng cách sử dụng lại phương thức split() với “&” làm dấu phân cách. Điều này sẽ tách từng chuỗi tham số thành một mảng

Mảng này được lặp qua từng khóa và giá trị được phân tách bằng cách phân tách bằng “=” làm dấu phân cách. Nó sẽ tách các cặp thành một mảng. Phần quan trọng của cặp có thể được truy xuất bằng cách truy cập vào chỉ mục đầu tiên của cặp và giá trị có thể được truy xuất bằng cách truy cập vào chỉ mục thứ hai. Điều này có thể được sử dụng để lấy tất cả các tham số trong URL có thể được sử dụng theo yêu cầu

Làm cách nào để lấy URL trang hiện tại bằng chuỗi truy vấn trong JavaScript?

Trả lời. Sử dụng cửa sổ. vị trí. href Thuộc tính . vị trí. href để lấy toàn bộ URL của trang hiện tại bao gồm tên máy chủ, chuỗi truy vấn, mã định danh phân đoạn, v.v.

Làm cách nào để có được đường dẫn URL hiện tại trong JavaScript?

Nếu bạn đang sử dụng JavaScript trong trình duyệt, bạn có thể lấy toàn bộ URL hiện tại bằng cách sử dụng cửa sổ. vị trí. href .

Làm cách nào để nhận các tham số URL hiện tại trong JavaScript?

Để lấy thông số URL, có 2 cách. .

Bằng cách sử dụng Đối tượng URLSearchParams

Bằng cách sử dụng Tách và truy cập từng cặp tham số

Làm cách nào để kiểm tra xem URL có chuỗi truy vấn trong JavaScript không?

Để kiểm tra xem URL hiện tại có chứa chuỗi trong Javascript hay không, bạn có thể áp dụng phương thức “test()” cùng với “window. vị trí. href” để khớp giá trị chuỗi cụ thể với URL hoặc “toString(). bao gồm ()”, hoặc phương thức “indexOf ()” để trả về chỉ mục của giá trị đầu tiên trong chuỗi đã chỉ định