Làm cách nào để tách chuỗi URL trong JavaScript?

Question

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

Nội dung chính Show

URLTìm kiếmThông số
Đối tượng URL
JavaScript thuần túy
Xóa phần cuối của URL
Mọi điều điên rồ mà JavaScript làm
Làm cách nào để tách một URL trong js?
Làm cách nào để lấy chuỗi con từ URL trong JavaScript?
Làm cách nào để lấy phần cuối của URL trong JavaScript?
Làm cách nào để lấy các phần URL trong JavaScript?

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 thành một mảng các chuỗi bằng cách tách nó thành các chuỗi con. Công cụ này cực kỳ hữu ích. Ví dụ: chúng tôi sẽ tách các tham số chuỗi truy vấn của một URL

var url = "http://www.example.com/category/page?query=true&query2=false";
// Split off the query string parameters
var query = url.split("?")[1]; // "query=true&query2=false"
// Now split up the params
var params = query.split("&"); // ["query=true", "query2=false"]
// Loop through the params and split the key and the value
for (var i=0; i < params.length; i++) {
    console.log(params[i].split("=")[0], params[i].split("=")[1]);
}
// query true
// query2 false

Chia sẻ

FacebookRedditTwitterPinterestEmailText message

Yêu thích

TIẾP THEO

Cách Làm Bánh Sandwich Ăn Sáng Ngon Nhất

Ăn chúng, đông lạnh chúng, thưởng thức chúng cả tuần

Tayler (75)

Ngày 21 tháng 8 năm 2021

35 phút

Không có gì nói chào buổi sáng giống như một chiếc bánh sandwich ăn sáng. Từ độ dẻo của bánh muffin đến độ xốp của trứng đến độ dẻo của phô mai, bánh mì ăn sáng là một khởi đầu tuyệt vời cho buổi sáng của bạn

Để lấy phần cuối cùng của URL trong JavaScript, hãy sử dụng .split('/') để chia chuỗi URL thành một mảng của mỗi phần, sau đó sử dụng .at(-1) để lấy phần cuối cùng từ mảng

Ví dụ

JavaScriptĐã sao chép.

function getLastPart(url) {
  const parts = url.split('/');
  return parts.at(-1);
}

const url1 = 'https://codingbeautydev.com/blog/javascript-get-last-part-of-url';
console.log(getLastPart(url1)); // javascript-get-last-part-of-url

const url2 = 'https://codingbeautydev.com/blog';
console.log(getLastPart(url2)); // blog

const url3 = 'https://codingbeautydev.com';
console.log(getLastPart(url3)); // codingbeautydev.com

Phương thức Array split() nhận một ký tự và tách một chuỗi thành một mảng các chuỗi con được phân tách bởi ký tự đó trong chuỗi. Các phân đoạn của URL được phân tách bằng ký tự /, vì vậy chúng tôi chuyển ký tự này cho split() để tạo một mảng với mỗi phân đoạn URL là một phần tử

JavaScriptĐã sao chép.

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

Sau khi lấy mảng này, chúng ta sử dụng phương thức Array

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

1 để lấy một phần tử từ nó.

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

2 là phần bổ sung ES2022 mới chấp nhận cả số nguyên dương và số âm

Truyền số nguyên âm cho

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

1 làm cho nó được tính từ cuối mảng, vì vậy

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

4 đưa ra phần tử đầu tiên từ cuối (phần tử cuối cùng) – phần cuối cùng của URL

JavaScriptĐã sao chép.

________số 8_______

Đăng ký bản tin Coding Beauty

Có được những hiểu biết hữu ích và nâng cao kiến thức phát triển web của bạn với các mẹo và hướng dẫn hàng tuần từ Coding Beauty. Hơn 2.000 nhà phát triển đăng ký

Xóa phần cuối của URL

Bạn có thể lấy phần cuối cùng của URL để xóa nó khỏi chuỗi URL. Nếu đó là những gì bạn muốn, thì không cần phải lấy phần cuối cùng của URL – chúng ta có thể xóa nó dễ dàng bằng các phương pháp

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

5 và

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

6

JavaScriptĐã sao chép.

function removeLastPart(url) {
  return url.slice(0, url.lastIndexOf('/'))
}

const url1 = 'https://codingbeautydev.com/blog/javascript-get-last-part-of-url';

// https://codingbeautydev.com/blog
console.log(removeLastPart(url1));

const url2 = 'https://codingbeautydev.com/blog';

// https://codingbeautydev.com
console.log(removeLastPart(url2));

Chúng tôi sử dụng phương thức

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

7

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

8 để lấy vị trí xuất hiện cuối cùng của ký tự /, bởi vì đây là điểm ngay trước khi phần cuối cùng của URL bắt đầu trong chuỗi

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

7

const urlParts = [
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url',
];

console.log(urlParts.at(-1)); // javascript-get-last-part-of-url

console.log(urlParts.at(-2)); // blog

console.log(urlParts.at(-3)); // codingbeautydev.com

1 trả về một phần của chuỗi nằm giữa chỉ mục bắt đầu và chỉ mục kết thúc được chỉ định, được truyền dưới dạng đối số thứ nhất và thứ hai tương ứng. Chúng tôi chuyển

const urlParts = [
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url',
];

console.log(urlParts.at(-1)); // javascript-get-last-part-of-url

console.log(urlParts.at(-2)); // blog

console.log(urlParts.at(-3)); // codingbeautydev.com

2 làm đối số đầu tiên để chuỗi con kết quả bắt đầu từ ký tự đầu tiên và chúng tôi chuyển kết quả của

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

8 làm đối số thứ hai để chuỗi con kết thúc tại chỉ mục trước khi phần cuối của URL bắt đầu trong chuỗi

Mọi điều điên rồ mà JavaScript làm

Hướng dẫn hấp dẫn về những cảnh báo tinh tế và những phần ít được biết đến của JavaScript

Đăng ký và nhận ngay một bản sao miễn phí

Ayibatari Ibaba

Ayibatari Ibaba là nhà phát triển phần mềm có nhiều năm kinh nghiệm xây dựng trang web và ứng dụng. Anh ấy đã viết rất nhiều về nhiều chủ đề lập trình và đã tạo ra hàng chục ứng dụng và thư viện mã nguồn mở

Làm cách nào để tách một URL trong js?

var newURL="http. //www. thí dụ. com/chỉ mục. html/homePage/aboutus/"; bảng điều khiển. nhật ký (URL mới); . var splitURL=newURL. toString(). split("/"); bảng điều khiển.

Làm cách nào để lấy chuỗi con từ URL trong JavaScript?

Giải thích .

var url = cửa sổ. vị trí. tên đường dẫn;

tên tệp var = url. chuỗi con (url. lastIndexOf('/')+1);

var url = cửa sổ. vị trí. tên đường dẫn; . chuỗi con (url. lastIndexOf('/')+1);

Làm cách nào để lấy phần cuối của URL trong JavaScript?

Bạn cũng có thể sử dụng hàm lastIndexOf() để xác định vị trí xuất hiện cuối cùng của ký tự / trong URL của bạn, sau đó sử dụng hàm substring() để trả về chuỗi con bắt đầu từ vị trí đó . bảng điều khiển. nhật ký (cái này. href. : console. log(this. href.

Làm cách nào để lấy các phần URL trong JavaScript?

Bạn có thể sử dụng cửa sổ JavaScript. vị trí. href thuộc tính để 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 đoạn, v.v.

programming javascript