I want to try to get through this lecture as quickly as possible, because there's a lot I want to cover.
I want us to go back.
Remember, we had that form with Wally Warthog and he submitted a password of secret1 and it produced
this URL.
This is where it all began, right when we started thinking about encoding and why we see these strange
characters.
Well, the question mark, the equals, the ampersands ...
these characters are reserved characters and that's why we can see them in the URL.
We've been through this in previous lectures.
We know this.
But what about that plus sign?
Why is that there?
Well, remember that URLs can't have spaces aka they are unsafe. And a space in hex is defined as
%20.
So why then does the URL have a + and not a %20?
Well, that is a very, very good question.
Firstly, you need to understand that the encoding used by your browser by default is based on a very
early version of the URI percent encoding rules. And over the years, it's modified these slightly.
One of these modifications was using a + symbol to represent spaces instead of %20.
But this has caused a lot of debate and a lot of confusion.
Let me explain.
It turns out how the character is encoded depends on where it is in the URL.
I know it sounds weird, right?
Let me explain.
The old spec, I'm talking HTML 2.0, said that space characters could be encoded as a + in the key-value pairs
in a query string.
Remember the query string part of a URL?
We covered it in a few lectures back.
It's after that question mark, remember?
So this means that only after the question mark, aka inside the query string, spaces can be replaced
by a +.
But this is according to HTML 2.0, and we know that HTML 2.0 is not the latest spec.
So then comes along HTML5 and that spec updated how a URL should be encoded. And how did HTML5 deal with
this issue?
The use of %20 to encode a space in a URL is explicitly defined in HTML5, but nothing's
really mentioned of the +, which causes a lot of confusion.
However, the latest specs do continue to define + as legal in the "application/x-www-form-urlencoded"
content type. But these latest specs don't explicitly state that query strings should have the +.
So they've kind of mentioned the + in other areas of the browser, but not when it comes to URL encoding.
It's very, very confusing, but HTML5 does explicitly mention the %20 in the URL encoding.
So the burning question is ... should you use a + to replace spaces or %20?
If you use both, it just means that Wally Warthog will be encoded differently in the path and the query
parts of the URL.
Well, let's assume you use both.
And this means that Wally Warthog can or may or potentially will be encoded differently in the path
and query parts of a URL.
What do I mean?
Well, let's have this URL here and let's include Wally Warthog in two different places in the path
of the URL, and also as a query string.
So what I'm saying is the %20 must always be %20 in the actual path.
But when it comes to the query string, we've got a +.
And remember the query string is just defined as all the values after this question mark.
So if you had a URL like this, is it a problem?
Well, no, not really.
If your URL encodes the + to a %20 or vice versa, it's going to work just the same.
There's a lot of legacy code which has +'s in the query string part, and there's still a lot of
code that generates a + in the query string part.
So the odds are, that you're going to be breaking nothing by using one over the other.
Got it?
Great.
Bottom line, URLs are technically covered entirely by the latest specs, which explicitly state that
spaces ought to be converted to %20.
So my recommendation is why don't we just always use %20 where we can?
It's just better.
It's just conforming to the latest specs.
"Okay, Clyde.
That's all good and well, but what happens if, you know my encoding software in the background doesn't
convert my space to
%20?
As an example, we saw Gerald the Giraffe was converted to pluses.
Well, the good news is that JavaScript and other languages all have functions that can be used to URL encode
a string.
For example, in JavaScript we can use the encodeURIComponent() method, and this encodes all spaces as
%20.
Let me hop over quickly to the console, and show you an example.