encodeURIComponent vs. encodeURI: Different Uses
encodeURIComponent encodes a much broader set of characters, including ones like &, ?, and # that have structural meaning in a URL — making it the correct choice for encoding a single value that will be inserted into a URL (like a query parameter); encodeURI encodes a narrower set, deliberately leaving structural characters untouched — making it suited to encoding an entire, already-structured URL, where those characters need to keep their intended structural meaning.
Using the wrong one of these two is a common source of a broken or double-encoded URL in real code.
Why encoding a value needs the broader function
If you're encoding a single piece of data — a search term, a name, a parameter value — that value might itself legitimately contain a character like & or # as actual content, and you need those encoded so they don't get misread as URL structure once inserted; encodeURIComponent-style encoding covers exactly this case, which is what this tool applies.
Why encoding a full URL needs the narrower function
If you already have a complete, correctly structured URL and just need to make sure any stray unsafe characters within it are encoded, you want a function that leaves the meaningful structural characters (:, /, ?, &, #) alone — encoding those in an already-valid URL would break it rather than fix it.