Develop Reference

Encoding json data for a mailto link

How do I properly encode a mailto link with JSON data in the query parameters so that the link works as expected when some of the JSON data possibly includes spaces?
Here is a simple example:
var data = {
"Test": "Property with spaces"
};
var mailTo = 'mailto:?body=http://www.google.com/?body=' + JSON.stringify(data);
document.getElementById("link").href = mailTo;
The resulting link in the email after clicking the link looks like this:
Here is a JSBin showing what I am talking about:
https://jsbin.com/vuweyemeji/1/edit?html,js,output
Edit: Adding encodeURI() or encodeURIComponent() doesn't seem to work for me. I tried adding either of those methods around the data object and when I click the mailto link the url still looks the same in outlook.

You need to use encodeURIComponent twice, because you are encoding a parameter inside another parameter.
Your link is using the mailto protocol and using a body parameter which content should be encoded. But, inside that content you are entering a URL which has parameters, so, this parameters should be encoded also.
Try this:
var data = {"Test": "Property with spaces"};
var mailTo = 'mailto:?body=' + encodeURIComponent('http://www.google.com/?body=' + encodeURIComponent(JSON.stringify(data)));
document.getElementById("link").href = mailTo;
<a id='link'>anchor</a>

Parameter of an URL within another URL

This is a simple to understand question, I will explain step by step as to make everything clear.
I am using the Google Feed API to load an RSS file into my JavaScript application.
I have a setting to bypass the Google cache, if needed, and I do this by appending a random number at the end of the RSS file link that I send to the Google Feed API.
For example, let's say this is a link to an RSS:
http://example.com/feed.xml
To bypass the cache, I append a random number at the end as a parameter:
http://example.com/feed.xml?0.12345
The whole url to the Google Feed API would look like this, where "q" is the above link:
https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http://example.com/feed.xml?0.12345
This bypasses the cache and works well in most cases but there is a problem when the RSS link that I want to use already has parameters. For example, like this:
http://example.com/feed?type=rss
Appending the number at the end like before would give an error and the RSS file would not be returned:
http://example.com/feed?type=rss?0.12345 // ERROR
I have tried using "&" to attach the random number, as so:
http://example.com/feed?type=rss&0.12345
This no longer gives an error and the RSS file is correctly returned. But if I use the above in the Google Feed API url, it no longer bypasses the cache:
https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http://example.com/feed.xml&0.1234
This is because "0.1234" is considered a parameter of the whole url and not a parameter of the "q" url. Therefore "q" remains only as "http://example.com/feed.xml", it is not unique so the cached version is loaded.
Is there a way to make the number parameter be a part of the "q" url and not a part of the whole url?

You need to use encodeURIComponent like this:
var url = 'http://example.com/feed.xml&0.1234';
document.getElementById('results').innerHTML = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=' + encodeURIComponent(url);
<pre id="results"></pre>
You are escaping the special characters that would have been treated as part of the url otherwise.
To append or create a queryString:
var url = 'http://example.com/feed.xml';
var randomParameter = '0.1234';
var queryString = url.indexOf('?') > - 1;
if(queryString){
url = url + '&' + randomParameter;
} else {
url = url + '?' + randomParameter;
}
//url needs to be escaped with encodeURIComponent;

You need to use encodeURIComponent to do this.
encodeURIComponent('http://example.com/feed.xml&0.1234')
will result in
http%3A%2F%2Fexample.com%2Ffeed.xml%260.1234
and when appended to the end result you'll get
https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http%3A%2F%2Fexample.com%2Ffeed.xml%260.1234

location.href is decoding the URL

I have a javascript function:
function QuoteBeGone(url)
{
location.href = url;
}
The URL that is passed is encoded, for example http://www.target.com/page.asp?name%3DJohn%27s%2BProject, but when the new page loads, the URL is unencoded - http://www.target.com/page.asp?name=John's+Project.
The apostrophe is messing up the page, so I would like to keep it encoded in the URL, but it doesn't seem to stay that way. I assume the location.href function is interpreting the URL before passing it along.
Any suggestions?

In the place where you are creating the URL that you are passing to the function use encodeURIComponent() on the value for name
e.g.
var john = "John's Project";
QuoteBeGone('http://www.target.com/page.asp?name='+encodeURIComponent(john));
If you want it to still be encoded after a decode due to navigating to that URL, then you have to double encode:
QuoteBeGone('http://www.target.com/page.asp?name='+encodeURIComponent(encodeURIComponent(john)));

Passing "#" hash symbol in request parameter of url not working in Firefox

I am hitting a struts action using AJAX, everything is fine but there is problem with Firefox , when i am passing the parameter in URL as a request parameter and if that parameter, contains hash(#) symbol in the end, then firefox strips everything after that symbol and send that parameter to action without it.
For example, if im passing test123#abcd in Firefox, then i am getting only test123 in action class as opposed to test123#abcd which is undesirable for my requirement.For IE it is working perfectly.Is there any way by which i can extract the full parameter including the # symbol in Firefox.
please let me know if i need to post the java action code also,thanks.
JS snippet
var valuePassword=test123#abcd;
var url = "/test/ChangePwdAjax.do?newPass="+valuePassword;
var xmlHTTP = getXMLHTTPRequest();

Use
var url = "/test/ChangePwdAjax.do?newPass="+ encodeURIComponent(valuePassword);
This will encode your valuePassword to a valid URL component which can be passed as a query string in URLs
And on the other side you should use decodeURIComponent to get the value from encoded string
var value = decodeURIComponent(valuePasswordPassed);
To know more about this Go here

When you change data you have to do a http POST request. Not a GET request. This will automatically solve your problem without having to encode your password.
xmlhttp.open("POST", "/test/ChangePwdAjax.do", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("newPass=" + valuePassword);

Surely worth mentioning that passing a password as a URL parameter is a terrible idea. A passer-by can see your new password in your browser's address bar. And anyone in the future can find the password in your browsing history.
-mobailey

How do I URL Encode a URL parameter that is itself a URL?

Quick background -
I am making a jQuery ajax call to a service I wrote that returns a JSON response. The service accepts a web site URL (i.e. www.google.com, www.xyz.com/abc123). The format of the request is as follows:
http://www.mysite.com/[url]
... where [url] is a user provided URL (again, something like www.google.com/abc)
I need to URL encode the parameter, as mysite.com/www.google.com is giving me errors.
My problem is, all of the standard javascript encoding functionality does not actually encode the URL.
An example:
<html>
<head>
<script>
document.write("encodeURIComponent = " + encodeURIComponent("www.google.com") + "<br />");
document.write("encodeURI = " + encodeURI("www.google.com") + "<br />");
document.write("escape = " + escape("www.google.com"));
</script>
</head>
<body>
</body>
... has the following output:
encodeURIComponent = www.google.com
encodeURI = www.google.com
escape = www.google.com
What is the proper way to achieve this using JavaScript/jQuery?
I don't think it's relevant, but just in case, this is a Rails 3.0.7 app.
EDIT FOR MORE DETAIL
If www.google.com is already URL encoded, and periods are fine in my URL (www.mysite.com/www.google.com), why am I getting this error?
From Chrome Dev Tools:
GET http://localhost:3000/s/www.google.com 404 (Not Found)
My jQuery snippet:
$.getJSON("http://localhost:3000/s/" + encodeURI($("#txtURL").val()), function(data) {
alert(data.result.url);
});

This is a perfectly valid URL:
http://mysite.com/s/www.google.com
I suspect that you're just running into the Rails format stuff (i.e. .html at the end of the URL sets the format to HTML, .js for JSON, ...) so you just need to fix your route to keep the format auto-detection from getting in the way:
map.connect '/s/:url', :requirements => { :url => /.*/ }, ...
or
match '/s/:url' => 'pancakes#house', :constraints => { :url => /.*/ }, ...
or whatever routing syntax you're using.
If you don't tell rails that the :url should match /.*/ (i.e. anything at all), it will try to interpret the periods in the route as format specifiers, that will fail and Rails will 404 because it can't figure out how to route the URL.

URL encoding escapes characters that have a special meaning in the URL (like / and ?) and/or aren't ASCII characters. http://mysite.com/www.google.com is a perfectly valid URL, there's nothing to escape. If you'd include the protocol as well, you'd get some escape-worthy characters:
encodeURIComponent('http://www.google.com')
"http%3A%2F%2Fwww.google.com"
If your server 404s on a request to http://localhost:3000/s/www.google.com, that means the URL isn't handled by the server. It doesn't mean that the URL is invalid.

As mu said dots don't need to be encoded.
The jQuery-way for building a proper QUERY_STRING would be the use of $.param()
$.param({encodeURIComponent:'http://www.google.de'})