Query String Builder
Compose URL query strings from key-value rows — repeated keys for arrays, automatic percent-encoding, live preview.
Loading tool…
浏览器内运行这个工具能做什么
Free in-browser query string builder. Add key-value rows, get a fully percent-encoded query string back. Repeated keys produce array-style parameters (tag=a&tag=b). Use it to build API request URLs, deep links, campaign URLs, or any URL with parameters. Tool code does not submit entered values to a TOOLGRID processing endpoint.
Repeated keys are supported natively — add the same key on multiple rows and you get array-style output (?tag=alpha&tag=beta&tag=gamma). This is the standard convention consumed by Express's qs parser, Rails strong parameters, Spring's @RequestParam List<>, and most modern frameworks. No special bracket syntax required.
Encoding uses the browser's built-in URLSearchParams, so values with spaces, ampersands, equals signs, emoji, or full Unicode are escaped correctly. You get the same percent-encoding the browser would produce when serializing a form — trustworthy without round-tripping through DevTools.
这个工具可以完成什么
Add rows for utm_source, utm_medium, utm_campaign, utm_content, and utm_term. The builder encodes spaces and special characters in campaign names automatically — no more broken Google Analytics attribution from malformed URLs.
When testing a REST or GraphQL endpoint in Postman, curl, or a browser, build the query string here first so every value is properly encoded. Especially useful when one of your filter values contains a comma, slash, or equals sign.
Faceted search and tag filters typically use repeated-key parameters (?category=books&category=ebooks&category=audio). Add the same key on multiple rows and the builder outputs them in the format Express, Rails, and most backends expect by default.
依赖结果前需要检查什么
- Performance and maximum practical input size depend on browser memory, device speed, and the structure of the input.
- Review the generated result before replacing or publishing an original file.
如何使用
- 1
Edit the seeded rows or add new rows with the + button. Enter a key and value on each row.
- 2
Watch the preview update live — the percent-encoded query string is shown as you type.
- 3
Copy the generated string and append it to your base URL with a leading ? (or & if you're concatenating to an existing query).
使用场景
Add rows for utm_source, utm_medium, utm_campaign, utm_content, and utm_term. The builder encodes spaces and special characters in campaign names automatically — no more broken Google Analytics attribution from malformed URLs.
When testing a REST or GraphQL endpoint in Postman, curl, or a browser, build the query string here first so every value is properly encoded. Especially useful when one of your filter values contains a comma, slash, or equals sign.
Faceted search and tag filters typically use repeated-key parameters (?category=books&category=ebooks&category=audio). Add the same key on multiple rows and the builder outputs them in the format Express, Rails, and most backends expect by default.
Deep links of the form myapp://path?source=email&campaign=spring-sale need the same percent-encoding rules as web URLs. Build the query portion here, then append it to your custom scheme prefix.
Build a query here, paste it into our URL Parser to verify Google sees what you intended, edit any rows that need adjustment, and copy the final version. The two tools are designed to be used together.
使用技巧
Want ?tag=a&tag=b&tag=c? Just add three rows with key=tag and different values. This is the standard format consumed by most backend frameworks. No need for ?tag[]=a&tag[]=b unless your specific framework requires it (some older PHP setups do).
URLSearchParams uses application/x-www-form-urlencoded serialization, so spaces become +. Percent-encoded %20 also decodes to a space, but this tool intentionally reports the browser API's + output.
A row with a key and an empty value outputs key= (key followed by equals followed by nothing). To omit the parameter entirely, delete the row instead of leaving the value blank. Some APIs treat key= as a falsy value, others as absent — be explicit about your intent.
Everything after # is the hash fragment, parsed separately by the browser and never sent to the server. Build your query string here, then append a hash manually if your single-page app needs one (e.g., #!/route/123).
常见问题
Are keys and values automatically URL-encoded?
Yes. Encoding uses the browser's built-in URLSearchParams API. Spaces become +, ampersands become %26, equals signs become %3D, and full Unicode (including emoji) is escaped using UTF-8 percent encoding. The output can be appended as a query string without encoding it again.
Does it handle repeated keys for array-style parameters?
Yes. Add the same key on multiple rows — the builder includes each row's value as a separate parameter in the output (e.g., tag=alpha&tag=beta). This matches what Express's qs parser, Rails strong parameters, and most modern backends consume by default.
Can I parse an existing query string back into rows?
Not in this tool — it's a builder, not a parser. To break a query string apart, use our URL Parser, which decomposes the full URL (protocol, host, path, query, hash) and lists every parameter with auto-labeled UTM and tracking tags. Build here, parse there.
What's the difference between this and the UTM Builder?
This tool is a generic any-parameter builder — keys and values are freeform. The UTM Builder is purpose-built for Google Analytics campaign URLs with named fields (Source, Medium, Campaign, Content, Term) and validation specific to UTM conventions. Use UTM Builder if you only need campaign URLs; use this when you need arbitrary query parameters for APIs, filters, or deep links.
Does the tool support empty values or empty keys?
Empty values output key= (a key followed by an equals sign and nothing). Empty keys are skipped — a row with no key contributes nothing to the output. To remove a parameter, delete the row instead of clearing one of its fields.
Is my data sent to a server?
The URLSearchParams API is built into every modern browser, and the tool runs in your browser. Tool code does not submit entered keys, values, or generated query strings to a TOOLGRID processing endpoint. Review browser extensions and device security before handling sensitive parameters.
Will the output work with my framework's query parser?
For repeated keys (arrays), yes — Express qs, Rails strong parameters, Spring @RequestParam List, ASP.NET model binding, and Go's url.Values all accept the standard ?key=a&key=b format. PHP defaults are an exception: you may need ?key[]=a&key[]=b — type the brackets explicitly in your key field if so.
下一步常用工具
如果还需要校验、转换或复用结果，可以继续打开相近的浏览器本地工具。