How do you parse a URL query string in JavaScript?
Jul 31, 2025 am 06:56 AM
使用URLSearchParams解析URL查詢字符串，1. 用new URLSearchParams(window.location.search)或字符串創(chuàng)建實(shí)例；2. 用.get('key')獲取單個(gè)值；3. 用.getAll('key')獲取重復(fù)參數(shù)的數(shù)組；4. 用.entries()遍歷所有鍵值對(duì)；5. 結(jié)合URL構(gòu)造函數(shù)解析完整URL。該方法無需正則或手動(dòng)分割，兼容現(xiàn)代瀏覽器和Node.js，可高效提取查詢參數(shù)并完整處理多值情況。
Parsing a URL query string in JavaScript is straightforward using the built-in URLSearchParams API, which is supported in all modern browsers and Node.js environments.
Use URLSearchParams to Parse Query Strings
If you have a URL or just the query part (like ?name=John&age=30), you can parse it like this:
const urlParams = new URLSearchParams(window.location.search);
// Or from a string:
// const urlParams = new URLSearchParams('name=John&age=30');
const name = urlParams.get('name'); // "John"
const age = urlParams.get('age'); // "30"The get() method returns the value of the first parameter with the given name. If the parameter doesn't exist, it returns null.
Handle Multiple Values with getAll() and entries()
Some query parameters may appear multiple times (e.g., ?tag=js&tag=web). Use getAll() to get an array of values:
const tags = urlParams.getAll('tag'); // ['js', 'web']To loop through all parameters:
for (const [key, value] of urlParams.entries()) {
console.log(`${key}: ${value}`);
}This is useful when you don’t know the parameter names in advance.
Bonus: Parse a Full URL (Including Hash or Path)
If you're working with a full URL string (not just window.location), construct a URL object first:
const url = new URL('https://example.com/page?name=John&city=NY');
const params = new URLSearchParams(url.search);
console.log(params.get('name')); // "John"This works great when parsing URLs from strings, like in server-side or utility functions.
Summary
- ? Use
new URLSearchParams(string)to parse query strings. - ? Use
.get('key')for single values. - ? Use
.getAll('key')for repeated parameters. - ? Use
.entries()to iterate all key-value pairs. - ? Combine with
URLconstructor for full URL parsing.
Basically, URLSearchParams is all you need — no regex or manual splitting required.
The above is the detailed content of How do you parse a URL query string in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Why NameResolutionError(self.host, self, e) from e and how to solve it
Mar 01, 2024 pm 01:20 PM
The reason for the error is NameResolutionError(self.host,self,e)frome, which is an exception type in the urllib3 library. The reason for this error is that DNS resolution failed, that is, the host name or IP address attempted to be resolved cannot be found. This may be caused by the entered URL address being incorrect or the DNS server being temporarily unavailable. How to solve this error There may be several ways to solve this error: Check whether the entered URL address is correct and make sure it is accessible Make sure the DNS server is available, you can try using the "ping" command on the command line to test whether the DNS server is available Try accessing the website using the IP address instead of the hostname if behind a proxy
How to get your Steam ID in a few steps?
May 08, 2023 pm 11:43 PM
Nowadays, many Windows users who love games have entered the Steam client and can search, download and play any good games. However, many users' profiles may have the exact same name, making it difficult to find a profile or even link a Steam profile to other third-party accounts or join Steam forums to share content. The profile is assigned a unique 17-digit id, which remains the same and cannot be changed by the user at any time, whereas the username or custom URL can. Regardless, some users don't know their Steamid, and it's important to know this. If you don't know how to find your account's Steamid, don't panic. In this article
PHP function introduction—get_headers(): Get the response header information of the URL
Jul 25, 2023 am 09:05 AM
PHP function introduction—get_headers(): Overview of obtaining the response header information of the URL: In PHP development, we often need to obtain the response header information of the web page or remote resource. The PHP function get_headers() can easily obtain the response header information of the target URL and return it in the form of an array. This article will introduce the usage of get_headers() function and provide some related code examples. Usage of get_headers() function: get_header
What is the difference between html and url
Mar 06, 2024 pm 03:06 PM
Differences: 1. Different definitions, url is a uniform resource locator, and html is a hypertext markup language; 2. There can be many urls in an html, but only one html page can exist in a url; 3. html refers to is a web page, and url refers to the website address.
How to use URL encoding and decoding in Java
May 08, 2023 pm 05:46 PM
Use url to encode and decode the class java.net.URLDecoder.decode(url, decoding format) decoder.decoding method for encoding and decoding. Convert into an ordinary string, URLEncoder.decode(url, encoding format) turns the ordinary string into a string in the specified format packagecom.zixue.springbootmybatis.test;importjava.io.UnsupportedEncodingException;importjava.net.URLDecoder;importjava.net. URLEncoder
How to add URL prefix to SpringBoot multiple controllers
May 12, 2023 pm 06:37 PM
Preface In some cases, the prefixes in the service controller are consistent. For example, the prefix of all URLs is /context-path/api/v1, and a unified prefix needs to be added to some URLs. The conceivable solution is to modify the context-path of the service and add api/v1 to the context-path. Modifying the global prefix can solve the above problem, but there are disadvantages. If the URL has multiple prefixes, for example, some URLs require prefixes. If it is api/v2, it cannot be distinguished. If you do not want to add api/v1 to some static resources in the service, it cannot be distinguished. The following uses custom annotations to uniformly add certain URL prefixes. one,
Scrapy optimization tips: How to reduce crawling of duplicate URLs and improve efficiency
Jun 22, 2023 pm 01:57 PM
Scrapy is a powerful Python crawler framework that can be used to obtain large amounts of data from the Internet. However, when developing Scrapy, we often encounter the problem of crawling duplicate URLs, which wastes a lot of time and resources and affects efficiency. This article will introduce some Scrapy optimization techniques to reduce the crawling of duplicate URLs and improve the efficiency of Scrapy crawlers. 1. Use the start_urls and allowed_domains attributes in the Scrapy crawler to
Nginx rewrites URL configuration practice to optimize website structure and SEO
Jul 04, 2023 pm 04:30 PM
Practical practice of Nginx rewriting URL configuration, optimizing website structure and SEO Introduction: In the modern Internet era, traditional static web pages can no longer meet the needs of users. In order to provide a better user experience, many websites begin to use dynamic web technology. However, the URLs of dynamic web pages are often not friendly enough, and there are certain difficulties in being included by search engines and shared by users. This article will introduce how to use Nginx's URL rewriting function to optimize the website structure and SEO. 1. Nginx’s URL rewriting function Nginx
