Hướng dẫn delete params from url javascript - xóa các thông số khỏi url javascript

Question

Phương thức delete() của giao diện URLSearchParams xóa tham số tìm kiếm đã cho và tất cả các giá trị liên quan của nó, từ danh sách của tất cả các tham số tìm kiếm.delete() method of the URLSearchParams interface deletes the given search parameter and all its associated values, from the list of all search parameters.

Nội dung chính Show

Thông số
Giá trị trả về
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Xóa một câu hỏi từ URL trong JavaScript #
Làm cách nào để loại bỏ queryString khỏi url?
Làm cách nào để xóa các tham số URL mà không cần trang làm mới?
Làm cách nào để xóa câu hỏi khỏi URL?
Làm cách nào để xóa một truy vấn tham số?

Lưu ý: Tính năng này có sẵn trong nhân viên web This feature is available in Web Workers

Cú pháp

Thông số

Copied!
const url = 'https://example.com/books?page=10#hash';

// ✅ Remove querystring
const result1 = url.split('?')[0];
console.log(result1); // 👉️ "https://example.com/books"

// ✅ Remove querystring
const result2 = url.slice(0, url.indexOf('?'));
console.log(result2); // 👉️ "https://example.com/books"

// ✅ Preserve hash
const index = url.indexOf('?');
const result3 = url.slice(0, url.indexOf('?')) +
                url.slice(url.indexOf('#'));
console.log(result3); // 👉️ "https://example.com/books#hash"

0

Tên của tham số sẽ bị xóa.

Giá trị trả về

Ví dụ

let url = new URL('https://example.com?foo=1&bar=2&foo=3');
let params = new URLSearchParams(url.search);

// Delete the foo parameter.
params.delete('foo'); //Query string is now: 'bar=2'

Thông số kỹ thuật

Sự chỉ rõ
URL Standard # Dom-ARLSearchParams-Delete # dom-urlsearchparams-delete

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xóa một câu hỏi từ URL trong JavaScript #

Để loại bỏ trình tự điều trị khỏi URL, hãy sử dụng phương thức

Copied!
const url = 'https://example.com/books?page=10#hash';

// ✅ Remove querystring
const result1 = url.split('?')[0];
console.log(result1); // 👉️ "https://example.com/books"

// ✅ Remove querystring
const result2 = url.slice(0, url.indexOf('?'));
console.log(result2); // 👉️ "https://example.com/books"

// ✅ Preserve hash
const index = url.indexOf('?');
const result3 = url.slice(0, url.indexOf('?')) +
                url.slice(url.indexOf('#'));
console.log(result3); // 👉️ "https://example.com/books#hash"

1 để phân chia chuỗi trên dấu câu hỏi và truy cập phần tử mảng tại INDEX
Copied!
const url = 'https://example.com/books?page=10#hash'; // ✅ Remove querystring const result1 = url.split('?')[0]; console.log(result1); // 👉️ "https://example.com/books" // ✅ Remove querystring const result2 = url.slice(0, url.indexOf('?')); console.log(result2); // 👉️ "https://example.com/books" // ✅ Preserve hash const index = url.indexOf('?'); const result3 = url.slice(0, url.indexOf('?')) + url.slice(url.indexOf('#')); console.log(result3); // 👉️ "https://example.com/books#hash"
2, ví dụ:
Copied!
const url = 'https://example.com/books?page=10#hash'; // ✅ Remove querystring const result1 = url.split('?')[0]; console.log(result1); // 👉️ "https://example.com/books" // ✅ Remove querystring const result2 = url.slice(0, url.indexOf('?')); console.log(result2); // 👉️ "https://example.com/books" // ✅ Preserve hash const index = url.indexOf('?'); const result3 = url.slice(0, url.indexOf('?')) + url.slice(url.indexOf('#')); console.log(result3); // 👉️ "https://example.com/books#hash"
3. Phương thức
Copied!
const url = 'https://example.com/books?page=10#hash'; // ✅ Remove querystring const result1 = url.split('?')[0]; console.log(result1); // 👉️ "https://example.com/books" // ✅ Remove querystring const result2 = url.slice(0, url.indexOf('?')); console.log(result2); // 👉️ "https://example.com/books" // ✅ Preserve hash const index = url.indexOf('?'); const result3 = url.slice(0, url.indexOf('?')) + url.slice(url.indexOf('#')); console.log(result3); // 👉️ "https://example.com/books#hash"
4 sẽ trả về một mảng chứa 2 chuỗi con, trong đó phần tử đầu tiên là URL trước truy vấn.

Copied!



const url = 'https://example.com/books?page=10#hash';
// ✅ Remove querystring
const result1 = url.split('?')[0];
console.log(result1); // 👉️ "https://example.com/books"
// ✅ Remove querystring
const result2 = url.slice(0, url.indexOf('?'));
console.log(result2); // 👉️ "https://example.com/books"
// ✅ Preserve hash
const index = url.indexOf('?');
const result3 = url.slice(0, url.indexOf('?')) +
url.slice(url.indexOf('#'));
console.log(result3); // 👉️ "https://example.com/books#hash"

Đối số duy nhất chúng tôi đã chuyển đến phương thức chuỗi.Split là bộ phân cách mà chúng tôi muốn chia chuỗi.

Copied!
const url = 'https://example.com/books?page=10#hash';

// 👇️ ['https://example.com/books', 'page=10#hash']
console.log(url.split('?'));

Phương thức trả về một mảng chứa 2 chuỗi - một chuỗi trước và từng chuỗi sau dấu hỏi.

Giải pháp này cũng xử lý kịch bản trong đó URL không chứa truy vấn.

Copied!
const url = 'https://example.com/books';

// 👇️ ['https://example.com/books']
console.log(url.split('?'));

Nếu bạn vượt qua một chuỗi con không chứa trong chuỗi, phương thức

Copied!
const url = 'https://example.com/books?page=10#hash';

// ✅ Remove querystring
const result1 = url.split('?')[0];
console.log(result1); // 👉️ "https://example.com/books"

// ✅ Remove querystring
const result2 = url.slice(0, url.indexOf('?'));
console.log(result2); // 👉️ "https://example.com/books"

// ✅ Preserve hash
const index = url.indexOf('?');
const result3 = url.slice(0, url.indexOf('?')) +
                url.slice(url.indexOf('#'));
console.log(result3); // 👉️ "https://example.com/books#hash"

1 sẽ trả về một mảng chứa toàn bộ chuỗi.

Một cách tiếp cận khác là sử dụng phương thức String.indexof để có được chỉ mục của dấu câu hỏi.

Để xóa trình tự điều khiển khỏi URL, hãy gọi phương thức

Copied!
const url = 'https://example.com/books?page=10#hash';

// ✅ Remove querystring
const result1 = url.split('?')[0];
console.log(result1); // 👉️ "https://example.com/books"

// ✅ Remove querystring
const result2 = url.slice(0, url.indexOf('?'));
console.log(result2); // 👉️ "https://example.com/books"

// ✅ Preserve hash
const index = url.indexOf('?');
const result3 = url.slice(0, url.indexOf('?')) +
                url.slice(url.indexOf('#'));
console.log(result3); // 👉️ "https://example.com/books#hash"

6 trên URL và lấy các ký tự từ Index
Copied!
const url = 'https://example.com/books?page=10#hash'; // ✅ Remove querystring const result1 = url.split('?')[0]; console.log(result1); // 👉️ "https://example.com/books" // ✅ Remove querystring const result2 = url.slice(0, url.indexOf('?')); console.log(result2); // 👉️ "https://example.com/books" // ✅ Preserve hash const index = url.indexOf('?'); const result3 = url.slice(0, url.indexOf('?')) + url.slice(url.indexOf('#')); console.log(result3); // 👉️ "https://example.com/books#hash"
2, cho đến chỉ mục của dấu câu hỏi trong chuỗi. Phương thức
Copied!

const url = 'https://example.com/books?page=10#hash'; // ✅ Remove querystring const result1 = url.split('?')[0]; console.log(result1); // 👉️ "https://example.com/books" // ✅ Remove querystring const result2 = url.slice(0, url.indexOf('?')); console.log(result2); // 👉️ "https://example.com/books" // ✅ Preserve hash const index = url.indexOf('?'); const result3 = url.slice(0, url.indexOf('?')) + url.slice(url.indexOf('#')); console.log(result3); // 👉️ "https://example.com/books#hash"
8 sẽ trả về một chuỗi mới không chứa truy vấn.

Copied!
const url = 'https://example.com/books?page=10#hash';

const result2 = url.slice(0, url.indexOf('?'));
console.log(result2); // 👉️ "https://example.com/books"

2 tham số chúng tôi đã chuyển đến phương thức chuỗi.Slice là:

Bắt đầu chỉ mục - Chỉ mục của ký tự đầu tiên được bao gồm trong chuỗi - the index of the first character to be included in the string
Chỉ mục kết thúc - đi lên, nhưng không bao gồm chỉ mục này - go up to, but not including this index

Phương thức

Copied!
const url = 'https://example.com/books?page=10#hash';

// ✅ Remove querystring
const result1 = url.split('?')[0];
console.log(result1); // 👉️ "https://example.com/books"

// ✅ Remove querystring
const result2 = url.slice(0, url.indexOf('?'));
console.log(result2); // 👉️ "https://example.com/books"

// ✅ Preserve hash
const index = url.indexOf('?');
const result3 = url.slice(0, url.indexOf('?')) +
                url.slice(url.indexOf('#'));
console.log(result3); // 👉️ "https://example.com/books#hash"

9 trả về chỉ mục của lần xuất hiện đầu tiên của chuỗi con trong chuỗi và

Copied!
const url = 'https://example.com/books?page=10#hash';

// 👇️ ['https://example.com/books', 'page=10#hash']
console.log(url.split('?'));

0 nếu không chứa chuỗi con trong chuỗi.

Đây là một trường hợp cạnh tiềm năng mà bạn cần xử lý nếu bạn chọn phương pháp này.

Copied!
const url = 'https://example.com/books';

let result2 = url;

if (url.includes('?')) {
  result2 = url.slice(0, url.indexOf('?'));
}

console.log(result2); // 👉️ "https://example.com/books"

Câu lệnh

Copied!
const url = 'https://example.com/books?page=10#hash';

// 👇️ ['https://example.com/books', 'page=10#hash']
console.log(url.split('?'));

1 của chúng tôi xử lý điều kiện mà URL không chứa chuỗi truy vấn.

Nếu bạn cần xóa truy vấn, nhưng muốn bảo quản hàm băm, kết hợp hai cuộc gọi vào phương thức

Copied!
const url = 'https://example.com/books?page=10#hash';

// ✅ Remove querystring
const result1 = url.split('?')[0];
console.log(result1); // 👉️ "https://example.com/books"

// ✅ Remove querystring
const result2 = url.slice(0, url.indexOf('?'));
console.log(result2); // 👉️ "https://example.com/books"

// ✅ Preserve hash
const index = url.indexOf('?');
const result3 = url.slice(0, url.indexOf('?')) +
                url.slice(url.indexOf('#'));
console.log(result3); // 👉️ "https://example.com/books#hash"

8.

Copied!
const url = 'https://example.com/books?page=10#hash';

// // ✅ Preserve hash
const result3 = url.slice(0, url.indexOf('?')) +
                url.slice(url.indexOf('#'));

console.log(result3); // 👉️ "https://example.com/books#hash"

Cuộc gọi đầu tiên đến phương thức

Copied!
const url = 'https://example.com/books?page=10#hash';

// ✅ Remove querystring
const result1 = url.split('?')[0];
console.log(result1); // 👉️ "https://example.com/books"

// ✅ Remove querystring
const result2 = url.slice(0, url.indexOf('?'));
console.log(result2); // 👉️ "https://example.com/books"

// ✅ Preserve hash
const index = url.indexOf('?');
const result3 = url.slice(0, url.indexOf('?')) +
                url.slice(url.indexOf('#'));
console.log(result3); // 👉️ "https://example.com/books#hash"

8 sẽ nhận được một phần của URL trước khi truy vấn.

Cuộc gọi thứ hai chứa chuỗi từ băm trở đi.

Nếu bạn chuyển một tham số duy nhất cho phương thức

Copied!
const url = 'https://example.com/books?page=10#hash';

// ✅ Remove querystring
const result1 = url.split('?')[0];
console.log(result1); // 👉️ "https://example.com/books"

// ✅ Remove querystring
const result2 = url.slice(0, url.indexOf('?'));
console.log(result2); // 👉️ "https://example.com/books"

// ✅ Preserve hash
const index = url.indexOf('?');
const result3 = url.slice(0, url.indexOf('?')) +
                url.slice(url.indexOf('#'));
console.log(result3); // 👉️ "https://example.com/books#hash"

8, nó bao gồm các ký tự đến cuối chuỗi.

Bạn có thể cần xử lý kịch bản, trong đó URL không chứa Truy vấn hoặc băm.

Copied!
const url = 'https://example.com/books?page=10#hash';

let result3 = url;

if (url.includes('?') && url.includes('#')) {
  result3 = url.slice(0, url.indexOf('?')) +
            url.slice(url.indexOf('#'));
}

console.log(result3);

Trong ví dụ này, chúng tôi chỉ gán lại biến

Copied!
const url = 'https://example.com/books?page=10#hash';

// 👇️ ['https://example.com/books', 'page=10#hash']
console.log(url.split('?'));

5, nếu URL chứa một queryString và băm, nếu không chúng tôi sẽ trả lại URL như hiện tại.

Làm cách nào để loại bỏ queryString khỏi url?

Chúng ta có thể sử dụng phương thức phân chia chuỗi JavaScript để xóa chuỗi truy vấn khỏi chuỗi URL. Để tạo hàm GetPathFromURL trả về phần URL trước chuỗi truy vấn. Chuỗi truy vấn luôn tuân theo dấu câu hỏi, vì vậy chúng ta có thể sử dụng Split với bất kỳ URL nào.use the JavaScript string split method to remove the query string from the URL string. to create the getPathFromUrl function that returns the part of the URL before the query string. The query string always follows the question mark, so we can use split with any URL.

Làm cách nào để xóa các tham số URL mà không cần trang làm mới?

Phương pháp 2: Thêm trạng thái mới với phương thức PUSHSTATE (): Phương thức PushState () được sử dụng để thêm một mục nhập lịch sử mới với các thuộc tính được truyền dưới dạng tham số.Điều này sẽ thay đổi URL hiện tại sang trạng thái mới được đưa ra mà không tải lại trang.Adding a new state with pushState() Method: The pushState() method is used to add a new history entry with the properties passed as parameters. This will change the current URL to the new state given without reloading the page.

Làm cách nào để xóa câu hỏi khỏi URL?

Phương pháp cắt () để đạt được điều này.Nếu nhân vật cuối cùng của url của bạn là '?', bạn có thể loại bỏ nó khỏi chuỗi URL. to achieve this. If the last character of your url is '?' , you can remove it from the url string.

Làm cách nào để xóa một truy vấn tham số?

Để xóa các thông số truy vấn bằng bộ định tuyến React:..

Sử dụng móc sử dụng ASPREACHPARAMS để lấy các tham số tìm kiếm của vị trí hiện tại ..

Sử dụng phương thức Delete () để xóa từng tham số truy vấn, ví dụ:SearchParams.Xóa ('Q') ..

Cập nhật các tham số tìm kiếm, ví dụ:SetsearchParams (searchParams) ..

programming javascript URLSearchParams remove param URLSearchParams clear all URLSearchParams w3schools

Hướng dẫn delete params from url javascript - xóa các thông số khỏi url javascript

Cú pháp

Thông số

Giá trị trả về

Ví dụ

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xóa một câu hỏi từ URL trong JavaScript #

Làm cách nào để loại bỏ queryString khỏi url?

Làm cách nào để xóa các tham số URL mà không cần trang làm mới?

Làm cách nào để xóa câu hỏi khỏi URL?

Làm cách nào để xóa một truy vấn tham số?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội