I am trying to save a string to an external file using JavaScript. Below is what I am executing.

var mytext = "1111#1111"
var a = document.body.appendChild(document.createElement("a"));
a.download = "My_output.html"; 
a.href = "data:text/html," + mytext; 
a.click();

This code works perfectly using Chrome. However with Firefox, it stops just prior to the "#". When I look at the resulting output file I see the following:

Results in Chrome look like this 1111#1111

Results in Firefox look like this 1111

It looks to me like the hashtag is breaking something. Can anyone help me understand why the "#" in a string is causing grief in Firefox but not Chrome? I have tried wrapping the string in double quotes as well as single quotes, but it does not appear to have any effect.

Any ideas?

I am trying to save a string to an external file using JavaScript. Below is what I am executing.

var mytext = "1111#1111"
var a = document.body.appendChild(document.createElement("a"));
a.download = "My_output.html"; 
a.href = "data:text/html," + mytext; 
a.click();

This code works perfectly using Chrome. However with Firefox, it stops just prior to the "#". When I look at the resulting output file I see the following:

Results in Chrome look like this 1111#1111

Results in Firefox look like this 1111

It looks to me like the hashtag is breaking something. Can anyone help me understand why the "#" in a string is causing grief in Firefox but not Chrome? I have tried wrapping the string in double quotes as well as single quotes, but it does not appear to have any effect.

Any ideas?

• javascript
• string
• hashtag

Share Improve this question Follow edited Aug 3, 2015 at 14:41 Calcolat 89822 gold badges1111 silver badges2222 bronze badges asked Aug 3, 2015 at 14:16 Bill RaynorBill Raynor 8322 bronze badges 2

• 8 have you tried encodeURIComponent("#")? – Tschallacka Commented Aug 3, 2015 at 14:17
• Just for the record, I arrived here for a different situation but the same string breaking because of a #, I was opening a modal/popup window to show some extra information to the user, the # was being passed in the query string, I know that what I did isn't the best solution, unless, you know that other symbols aren't used... so I replaced the # for ^ and then in the popup the ^ for #... works... and is quick xD – Gabriel G Commented Mar 6, 2020 at 23:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You need to add URL Encoding to your string before you submit it.

var mytext = encodeURIComponent( "1111#1111" );
var a = document.body.appendChild(document.createElement("a"));
a.download = "My_output.html"; 
a.href = "data:text/html," + mytext; 
a.click();

More information can be found here: encodeURIComponent

EDIT: And, this is just me btw, but why would you even do data:text/html? Just seems unnecessary.

You could just as easily submit this via Ajax (or use jQuery's $.ajax if you have that library available). If you happen to use jQuery, then all of this might be a little easier. Either way, hope that helps.

If I use this in firefox it es out fine

var mytext = encodeURIComponent("1111#1111");
var a = document.body.appendChild(document.createElement("a"));
a.download = "My_output.html"; 
a.href = "data:text/html," + mytext; 
a.click();

The trick is as always to encode uri ponents. And what you are passing along is in essense an uri ponent.

This way all special characters like ? # and + and % will be parsed correctly.