Hey guys can you help me solve next issue? For example we have url like site.com/post?comments=1,2,3,4 after I paste it in browser address string, my app opens and url decodes to site.com/post?comments=1%2C2%2C3%2C4, how to get rid of %2C in url and save it in original way and vice versa if someone opens url like site.com/post?comments=1%2C2%2C3%2C4 decode it to site.com/post?comments=1,2,3,4? I know that I can use method lice decodeURIComponent, but I don't know where and in which moment exactly apply it. I'm using react and react-router. Any ideas?
You can use decodeURIComponent for decoding and encodeURIComponent and encoding. To see the result run the snippet below:
console.log(decodeURIComponent(`site.com/post?comments=1%2C2%2C3%2C4`));
console.log(encodeURIComponent(`site.com/post?comments=1,2,3,4`));
The %2 that you see is due to the "," in your URL, for encoding and decoding you can use the library https://www.npmjs.com/package/base-64
var base64 = require('base-64');
var bytes = site.com/post?comments=1,2,3,4
var encoded = base64.encode(bytes);
console.log(encoded);
Related
I'm facing a new kind of error and I'm kind of stuck here. I have a lightweight code editor in my app and I send its content (typed by the user) to my back-end, encoding it in base64.
First I used codeContent.toString("base64"); method and it worked like a charm with this kind of testing content :
let numberTest = 52;
let arrayTest = [63, 24, 75];
let sumTest = numberTest + arrayTest[0];
The problem here, is that I can't decode it back to UTF-8 when I want to retrieve this code from my API, I get some gibberish.
So I tried this method instead : atob(codeContent);. In this case, if I type a simple text like : test, the encoded version looks fine (µë-), but the content is still empty in my backend after my POST. And if I try this with a simple line of JS like let testNumber = 52;, then I get this error : "DOMException: String contains an invalid character"
To sum it up : I'm a little lost, what's the good way to encode my text to base64 and retrieve it afterwards ?
My problem was that I understood atob and btoa wrong : I thought btoa decoded FROM base64, but it's the other way around.
So, encoding TO base64 :
btoa(unescape(encodeURIComponent(str)));
And decoding base64 :
decodeURIComponent(escape(window.atob(str)));
So currently, I have my url like this: http://localhost:8000/fund_monitor/fund_details/fundaccountid=4&transmission=3&startDate=2017-08-01&endDate=2017-08-02/
Then when I redirect the url using windows.location.replace(url), the url becomes like this: http://localhost:8000/fund_monitor/fund_details/fundaccountid%3D4&transmission%3D3&startDate%3D2017-08-01&endDate%3D2017-08-02/
So the equal sign gets converted to another format. Is there a way to retain the original format?
Thanks
It might be because the URL is not in a valid format. It's format is roughly protocol://host:port/path?query_params[1], where query_params looks like a=1&b=2 etc. But you do need the ? to separate the path from your parameters. Whatever you're using seems to treat the part fundaccountid=4&transmission=3&startDate=2017-08-01&endDate=2017-08-02/ as a path, and url encodes it so it can be a proper path. Perhaps try to write the URL as: http://localhost:8000/fund_monitor/fund_details?fundaccountid=4&transmission=3&startDate=2017-08-01&endDate=2017-08-02
and see if that works.
Though it will mean some changes to your backend.
[1] The full format you can see on Wikipedia or RFC 3986
You can use decodeURIComponent().
The decodeURIComponent() function decodes a Uniform Resource Identifier (URI) component previously created by encodeURIComponent or by a similar routine.
var url = 'http://localhost:8000/fund_monitor/fund_details/fundaccountid%3D4&transmission%3D3&startDate%3D2017-08-01&endDate%3D2017-08-02/';
console.log(decodeURIComponent(url));
I used this base64 and uriencode on a number
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/core-min.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-base64-min.js"></script>
<script>
var num= '1418265869452';
var base64num = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(salt));
var encodeuri = encodeURIComponent(base64num);
</script>
base64 num gives me MTQxODI2NTg2OTQ1Mg==
But actually i also needs to uri encode it after base64 encode
when i tried to encodeURIComponent(base64num) it throwed me an error as follows:
Exception thrown from JavaScript : Error: Malformed UTF-8 data
How to achieve this
I've never seen encodeURIComponent throw JS errors. Its probably someplace in the third party library. Depending on your browser support requirements you might be able to use the built in base64 encoder/decoders
var base64num = btoa('1418265869452'),
encodeuri = encodeURIComponent(base64num);
encodeuri; // "MTQxODI2NTg2OTQ1Mg%3D%3D"
This could also be happening when you try to decode it. First you have to decodeURIComponent before trying to base64 decode it.
You are passing salt variable as a parameter, but I am not seeing any initialization of it. Instead you need to pass num, then it will start working, as I have used num in place of salt and is working perfectly fine at my end.
Here is the updated JSFiddle Link
Updated Code:
var num= '1418265869452';
var base64num = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(num));
var encodeuri = encodeURIComponent(base64num);
alert(encodeuri);
I'm trying to decode a base64 string for an image back into binary so it can be downloaded and displayed locally by an OS.
The string I have successfully renders when put as the src of an HTML IMG element with the data URI preface (data: img/png;base64, ) but when using the atob function or a goog closure function it fails.
However decoding succeeds when put in here: http://www.base64decode.org/
Any ideas?
EDIT:
I successfully got it to decode with another library other than the built-in JS function. But, it still won't open locally - on a Mac says it's damaged or in an unknown format and can't get opened.
The code is just something like:
imgEl.src = 'data:img/png;base64,' + contentStr; //this displays successfully
decodedStr = window.atob(contentStr); //this throws the invalid char exception but i just
//used a different script to get it decode successfully but still won't display locally
the base64 string itself is too long to display here (limit is 30,000 characters)
I was just banging my head against the wall on this one for awhile.
There are a couple of possible causes to the problem. 1) Utf-8 problems. There's a good write up + a solution for that here.
In my case, I also had to make sure all the whitespace was out of the string before passing it to atob. e.g.
function decodeFromBase64(input) {
input = input.replace(/\s/g, '');
return atob(input);
}
What was really frustrating was that the base64 parsed correctly using the base64 library in python, but not in JS.
I had to remove the data:audio/wav;base64, in front of the b64, as this was given as part of the b64.
var data = b64Data.substring(b64Data.indexOf(',')+1);
var processed = atob(data);
I have moss service which output the url of image.
Lets say the output url has '&' character , the service appending amp; next to &.
for ex: Directory.aspx?&z=BWxNK
Here amp; is additionally added. it is a moss sevice. so i don't have control on the sevice.
what i can do is decode the output. As i am using Ajax calls for calling moss sevice i am forced to decode the out put from javascript. i tried decodeURIComponent,decodeURI,unescape. nothing solved the problem.
Any help greatly appreciated. even server side function also helpful. i am using Aspl.net MVC3
Regards,
Kumar.
& is not URI encoded, it's HTML encoded.
For a server side solution, you could do this:
Server.HtmlDecode("&") // yields "&"
For a JavaScript solution, you could set the html to "&" and read out the text, to simulate HTML decoding. In jQuery, it could look like this:
$("<span/>").html("&").text(); // yields "&"
& is SGML/XML/HTML for &.
If the service is outputting an XML document, then make sure you are using an XML parser to parse it (and not regular expressions or something equally crazy).
Otherwise, you need decode the (presumably) HTML. In JavaScript, the easiest way to do that is:
var foo = document.createElement('div');
foo.innerHTML = myString;
var url = foo.firstChild.data;