How to encode periods for URLs in Javascript?

Question

The SO post below is comprehensive, but all three methods described fail to encode for periods.

Post: Encode URL in JavaScript?

For instance, if I run the three methods (i.e., escape, encodeURI, encodeURIComponent), none of them encode periods.

So "food.store" comes out as "food.store," which breaks the URL. It breaks the URL because the Rails app cannot recognize the URL as valid and displays the 404 error page. Perhaps it's a configuration mistake in the Rails routes file?

What's the best way to encode periods with Javascript for URLs?

Solution 1

Periods shouldn't break the url, but I don't know how you are using the period, so I can't really say. None of the functions I know of encode the '.' for a url, meaning you will have to use your own function to encode the '.' .

You could base64 encode the data, but I don't believe there is a native way to do that in js. You could also replace all periods with their ASCII equivalent (%2E) on both the client and server side.

Basically, it's not generally necessary to encode '.', so if you need to do it, you'll need to come up with your own solution. You may want to also do further testing to be sure the '.' will actually break the url.

hth

Solution 2

I know this is an old thread, but I didn't see anywhere here any examples of URLs that were causing the original problem. I encountered a similar problem myself a couple of days ago with a Java application. In my case, the string with the period was at the end of the path element of the URL eg.

http://myserver.com/app/servlet/test.string

In this case, the Spring library I'm using was only passing me the 'test' part of that string to the relevant annotated method parameter of my controller class, presumably because it was treating the '.string' as a file extension and stripping it away. Perhaps this is the same underlying issue with the original problem above?

Anyway, I was able to workaround this simply by adding a trailing slash to the URL. Just throwing this out there in case it is useful to anybody else.

John

Solution 3

I had this same problem where my .htaccess was breaking input values with . Since I did not want to change what the .htaccess was doing I used this to fix it:

var val="foo.bar";
var safevalue=encodeURIComponent(val).replace(/\./g, '%2E');

this does all the standard encoding then replaces . with there ascii equivalent %2E. PHP automatically converts back to . in the $_REQUEST value but the .htaccess doesn't see it as a period so things are all good.

Solution 4

Periods do not have to be encoded in URLs. Here is the RFC to look at.

If a period is "breaking" something, it may be that your server is making its own interpretation of the URL, which is a fine thing to do of course but it means that you have to come up with some encoding scheme of your own when your own metacharacters need escaping.

Solution 5

I had the same question and maybe my solution can help someone else in the future.

In my case the url was generated using javascript. Periods are used to separate values in the url (sling selectors), so the selectors themselves weren't allowed to have periods.

My solution was to replace all periods with the html entity as is Figure 1:

Figure 1: Solution

var urlPart = 'foo.bar';
var safeUrlPart = encodeURIComponent(urlPart.replace(/\./g, '.'));

console.log(safeUrlPart); // foo%26%2346%3Bbar
console.log(decodeURIComponent(safeUrlPart)); // foo.bar

View more solutions

Comments

[superultranova]

@crashalot I think your Rails routing configuration needs to be fixed. I'm not a rails guy, but it is possible Rails doesn't support periods. Check out this url, I believe it addresses your problem: masonoise.wordpress.com/2010/02/04/…

[rogerdpack]

I wasn't able to find my routes so used this hacky crappy work around: Tag.find_by_name(params[:id] + '.' + params[:format])

[Cory Kendall]

Hmm, this didn't work using rails 3.2; the trailing slash gets eaten first (before the period and following "type" get stripped off. Any ideas?

[mmmpop]

Javascript escape() will also convert %2E back to the original period; this is the best, most direct answer.

[John Rix]

For URLs encoded in this fashion on a sever rendered page at least, browsers decode the encoded periods back before you follow the links, so this doesn't solve the problem in many cases.

[wedstrom]

Yes, you can natively encode with base64 in javascript with atob and btoa. Not that I would recommend it for URL parameters...

[Totty.js]

Actually paypal encodes the return url dot. "website.com" is converted to "website%2ecom". You can do it from here paypal.com/uk/cgi-bin/webscr?cmd=_button-management (add a return url, don't save button in paypal and then look at the email version of the link)

[Polv]

Sole /., /.., /%2E, /%2E%2E can all break URL constructor, with browser JavaScript alone.

[Pointy]

@Polv as I wrote in the answer, a period may be wrong based on how a server works and/or an application on the server, but they do not need to be encoded in order for the URL itself to be syntactically correct.