encodeURI vs encodeURIComponent: encode the right boundary

Decision reference

Encode one query value as data

In the search term R&D tools, ampersand belongs to the value. In a query string, an unescaped ampersand separates parameters. encodeURIComponent escapes it so the receiver gets one value. Apply this operation before inserting the value into a URL. Encoding the finished URL as one component would escape its structural characters too and no longer produce the intended navigation target.

Whole URI mode preserves reserved syntax

encodeURI leaves characters such as colon, slash, question mark and ampersand available as URI syntax. It cannot infer whether an ampersand in your text was intended as data or a separator. For programmatic construction, URL and URLSearchParams make the boundary clearer. The utility exposes both modes so you can inspect the difference rather than silently choosing one for every task.

Decode at the corresponding boundary

decodeURIComponent interprets escaped component characters. decodeURI preserves certain encoded reserved characters to avoid altering URI structure. A malformed percent sequence or invalid encoded UTF-8 should fail rather than be silently repaired. The tool reports that error. Keep a fixture with a literal percent sign so a decoder change does not unexpectedly reinterpret legitimate content.

URL encoding is not HTML sanitization

An encoded query value is not automatically safe as arbitrary HTML. URL and HTML contexts have separate rules. In application code, validate the intended URL and assign it through a suitable DOM property rather than constructing markup from input. This utility converts text; it does not certify a destination as safe, reachable or permitted. Verify the receiver’s parsed values as part of the end-to-end test.

Worked example: query value boundary

Use this exact sample to isolate the behavior discussed above. Keep the operation and options with the sample when reporting a result; changing the input representation can change what the test demonstrates.

Input or question

Value: R&D tools
Encoded: R%26D%20tools

Expected result or interpretation

https://example.test/search?q=R%26D%20tools

A slash inside a value must not become a new path segment

A value such as team/alpha can be one label or two path segments depending on the endpoint contract. Component encoding represents the slash as %2F, while whole-URI encoding preserves it as structure. Do not assume the server will accept an encoded slash in every route; proxies and routing layers can apply their own rules. If the value is a query parameter, use a query builder and inspect the parsed value. If it is a path identifier, follow the endpoint’s documented representation. Keep the distinction in your test name so a future change from query to path does not reuse the wrong conversion by accident.

Test the boundary with characters that have two roles

Use a value containing ampersand, slash, question mark and a space. Those characters can be either data or URL syntax depending on where they appear. First encode the value alone, then insert it through the actual URL construction path. Inspect the final request and the receiver’s parsed parameter. This exposes a bug that a simple alphanumeric value would leave invisible.

If the endpoint expects a complete nested URL as one parameter, encode that entire nested URL as a component of the outer URL. That is a structural boundary, not a contradiction of whole-URI mode. Within the nested URL, its own components follow their own rules. A query builder can clarify these layers by accepting raw values rather than pre-escaped strings. Keep path segments separate too: a slash inside a segment is not always equivalent to a path separator. Consult the endpoint contract when encoded delimiters are involved, because servers and routing layers can differ. Finally, URL conversion does not decide whether schemes such as javascript are acceptable to navigate. Destination validation and DOM insertion belong to a separate application policy. The resulting string is a conversion result, not a safety certificate.

Verification cases

• R&D tools as q value: Ampersand must remain part of the value.
• Complete https URI: Structural separators should remain meaningful.
• Nested URL in outer query: Encode the nested target as one outer component.

Before you use the result

1. Encode raw values before assembly.
2. Keep decoding boundaries consistent.
3. Reject malformed escapes.
4. Inspect the receiver’s parsed value.

Continue the workflow

Why a plus sign becomes a space in a query string addresses debug plus signs in query/form data. Find and fix double URL encoding without decoding blindly addresses diagnose repeated percent encoding.