What you will build
A query string carries small pieces of data in a URL. In a search link, those pieces might be a search term, a category, or several selected tags. For example, the part after the question mark in https://example.com/search?q=tea&tag=beginner is a query string. Building it by joining strings yourself becomes error-prone when values contain spaces, ampersands, or other characters with special meaning in a URL.
This project creates a buildUrl function that accepts an absolute URL and a list of name–value pairs. It returns a new URL with those pairs added. You can try the examples in the console of a modern browser that supports URL and URLSearchParams, or in Node.js 18 or later. No package or installation is needed for the browser version. The example.com addresses below are placeholders, not a service you need to contact.
Write the builder
Enter this function in your JavaScript console: function buildUrl(base, pairs) { const url = new URL(base); for (const [name, value] of pairs) { url.searchParams.append(name, String(value)); } return url.toString(); }
The URL object separates the address into parts, including its query string. Its searchParams property provides URLSearchParams methods for changing that query string. The append method adds a pair, and URL handles the necessary encoding when it produces the final string. String(value) makes the conversion from a number or boolean explicit; it does not turn an object into useful query data, so pass simple values to this helper.
Try it with an existing parameter and two values for the same key: const link = buildUrl("https://example.com/search?source=nav", [ ["q", "tea & biscuits"], ["tag", "beginner"], ["tag", "web basics"] ]); console.log(link);
The result is https://example.com/search?source=nav&q=tea+%26+biscuits&tag=beginner&tag=web+basics. The existing source parameter remains. Spaces in these query values appear as plus signs, and the ampersand inside the search term becomes %26. That encoding keeps the ampersand from being mistaken for the separator between parameters.
Choose between adding and replacing
The builder uses append deliberately: it can represent multiple values under one name. The two tag entries remain separate, which is useful when a page accepts several selected filters. But append also keeps any matching key already present in the base URL. If the base contains q=old and you append q=new, the result has both values. Your application must decide whether that is desirable.
For a parameter that should have just one value, use set instead. For example, after creating a URL object, url.searchParams.set("q", "new search") replaces its existing q values with one new value. You can also remove a parameter with url.searchParams.delete("q"). These methods let you define different rules for different fields rather than treating every parameter as a string to concatenate.
An empty string is still a value: appending ["q", ""] produces a q parameter with an empty value. Decide whether your project should keep empty fields or skip them before calling buildUrl. Avoid silently skipping values inside the helper unless that behavior is part of its documented purpose.
Check the result by reading it back
A useful project check is to parse the generated link and inspect its values instead of relying only on how the URL looks. Run: const result = new URL(link); console.log(result.searchParams.get("q")); console.log(result.searchParams.getAll("tag")); console.log(result.searchParams.get("source"));
The first call returns tea & biscuits. The second returns an array containing beginner and web basics, in that order. The third returns nav. Notice that get returns one value, while getAll is the appropriate check for a key that can occur more than once. These checks also show that the encoded characters in the URL can be read back as the original values.
Try a few changes of your own: use a value containing a question mark, add a numeric page value, and start with a URL that has no query string. If a check fails, inspect the pairs you passed in before changing the encoding. Passing an already encoded value, such as tea%20biscuits instead of tea biscuits, can encode the percent sign again. Give URLSearchParams the original value and let it do the conversion.
Use it in a small project
This helper fits a search page or filter interface: collect the selected values, place them in an array of pairs, and call buildUrl to create a link. If you are working with a relative path such as /search, provide a base when constructing the URL. In a browser, new URL("/search", window.location.origin) creates an absolute URL for the current origin; new URL("/search") by itself does not provide enough information.
Keep the resulting query string for values you are comfortable putting in a URL. URLs can be copied, saved, and appear in browser history, so they are not a place for passwords or other secrets. With that boundary in mind, the builder gives you a compact, reusable way to make links without manually managing question marks, separators, or character encoding.
