encodeURIComponent() vs encodeURI() is a split between a piece of a URL and the URL itself. encodeURIComponent prepares one component: a query value, a path segment, or any other text that will sit inside an address. encodeURI prepares a whole URL and leaves the characters that structure that URL alone. Using the first function on a finished address escapes the separators. Using the second function on a query value leaves & and = in place, so the next parser treats them as more parameters.
YallaSolve’s URL Encoder / Decoder calls encodeURIComponent and decodeURIComponent only. It will not pretend to be a whole-URL encoder. When you already have an absolute URL and you want its parts, the URL Parser Tool uses the browser’s WHATWG parser. It does not guess a scheme, and it does not fetch the address.
encodeURIComponent leaves letters, digits, and - _ . ! ~ * ' ( ). Everything else in the component becomes a UTF-8 percent sequence. That includes the characters a URL uses as syntax: ; , / ? : @ & = + $ #, plus space.
encodeURI leaves that same unreserved set and also leaves ; , / ? : @ & = + $ #. A colon in https: stays a colon. Slashes in the path stay slashes. ?, &, and = stay so the query still has parameters. # stays so the fragment is still a fragment. A space is not in either safe set, so both functions turn a space into %20.
encodeURIComponent('a&b=c') is a%26b%3Dc.encodeURI('a&b=c') is still a&b=c.encodeURIComponent('https://example.com/a?q=1#h') escapes the colon, slashes, question mark, equals sign, and hash. The result is one component, not an address.encodeURI('https://example.com/a b?q=1#h') encodes the space and leaves :, /, ?, =, and #. The result is https://example.com/a%20b?q=1#h .Suppose the value is a b&c?=é. Inside a parameter that string is data. The ampersand must not open a second parameter, the equals sign must not open a second name, and the question mark must not start a new query. encodeURIComponent produces a%20b%26c%3F%3D%C3%A9. Joined after ?q=, the address still has one parameter.
encodeURI on the same value leaves &, ?, and = untouched and encodes the space and the accented character, producing a%20b&c?=%C3%A9. Pasted into a query, the raw ampersand splits the parameter list. The function did not fail. It treated syntax characters as syntax, which is the wrong reading of a value.
The reverse matters too. decodeURIComponent('%26') returns an ampersand. decodeURI('%26') returns the characters %26, because decodeURI does not decode the characters encodeURI would have left alone. The same is true of %3A: decodeURI leaves it encoded, and decodeURIComponent returns a colon. If you decode a component with decodeURI, reserved sequences stay encoded and the value is wrong. The YallaSolve page uses decodeURIComponent, so an encoded ampersand becomes an ampersand and %3D becomes an equals sign.
Neither function turns a space into a plus sign. A plus is an application/x-www-form-urlencoded convention used by some form parsers, not part of these two functions. encodeURIComponent(' ') and encodeURI(' ') are both %20.
A literal plus is the other way around. encodeURI('+') stays +, because plus is in the set encodeURI preserves. encodeURIComponent('+') is %2B. If a form parser later reads + as a space, a plus that you meant as a plus has to be %2B before that parser sees it. The YallaSolve encoder does not apply the form convention. If you need that convention, these two functions are not the whole job.
Non-ASCII text is UTF-8, then percent-encoded. é is the bytes C3 A9, written %C3%A9, for both functions. A character that looks like an ASCII letter from another script is a different sequence. Nothing here folds Unicode or strips accents.
decodeURIComponent('%') and decodeURIComponent('%ZZ') throw. The sequence is cut off, or the two characters after the percent sign are not hexadecimal. decodeURI throws on those same broken sequences. A successful call is not a guess that repairs the string. The encoder page clears the result and says the percent-encoding is malformed, so an older success does not stay on screen under the error.
Encoding a string that already contains percent sequences escapes the percent signs. % becomes %25. One decode then restores the percent signs, not the character those signs used to name. Decode a component that is already encoded, or encode the raw value before you join it. Do not stack the two and expect one decode to finish the job.
The URL Parser does not repair this either. It parses an absolute URL. example.com/docs has no scheme, and the parser reports that instead of inventing https. Encoding and parsing stay in the browser. Neither page requests the URL.
Choose encodeURIComponent when the characters are data inside one component, including ?, &, =, #, and +. Choose encodeURI when you already have a URL and you need spaces and other unsafe characters escaped without destroying the separators. Decode with the matching function, because decodeURI will not turn %26 back into an ampersand. On YallaSolve the encoder is the component pair only. Build the address yourself, then parse it if you need the parts.
No. It encodes one component. The scheme colon, slashes, question mark, ampersands, equals signs, and hash all get escaped, so the result is not an address you can open.
The value still contained a raw ampersand or equals sign. encodeURI leaves those characters in place. encodeURIComponent turns them into percent sequences.
No. Both write a space as %20. A plus sign is a form-encoding convention. encodeURI leaves a literal plus as plus. encodeURIComponent writes %2B.
decodeURI does not decode characters that encodeURI would have preserved. An encoded ampersand stays encoded. decodeURIComponent returns the ampersand.
No. Encode Component and Decode Component call encodeURIComponent and decodeURIComponent. A finished absolute URL belongs on the URL Parser.