How can I urlencode a UInt8Array in JavaScript? using encodeURIComponent does not work, for example with
encodeURIComponent((new Uint8Array([72,101,108,108,111,32,87,111,114,108,100])));
I expected:
Hello%20World
but I got
72%2C101%2C108%2C108%2C111%2C32%2C87%2C111%2C114%2C108%2C100"
On
You can converts the Uint8Array to a string before encoding it using encodeURIComponent.
const uint8Array = new Uint8Array([72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]);
// Convert Uint8Array to a regular array of characters
const charArray = Array.from(uint8Array, byte => String.fromCharCode(byte));
// Join the characters to form a string
const stringFromUint8 = charArray.join('');
// Encode the string using encodeURIComponent
const encodedString = encodeURIComponent(stringFromUint8);
console.log(encodedString); // Output: Hello%20WorldIt probably doesn’t feel very nice, but you can make a string out of any bytes, which escape will then URL-encode as Latin-1 (i.e. bytes):
const bytes = new Uint8Array([72,101,108,108,111,32,87,111,114,108,100]);
console.log(escape(String.fromCharCode(...bytes)));If it's text (as it seemed in the question), I'd use TextDecoder with the text encoding the data in the array is in. For instance, using the default UTF-8:
const encoded = encodeURIComponent(new TextDecoder().decode(array));
Live Example:
const array = new Uint8Array([72,101,108,108,111,32,87,111,114,108,100]);
const encoded = encodeURIComponent(new TextDecoder().decode(array));
console.log(encoded);But in a comment you've said it's just arbitrary binary data. In that case, I'd send it using Base-64 encoding or similar, rather than as text. You'd do that as shown in the answers to this question. For instance, this answer shows doing it with built-in browser features:
// note: `buffer` arg can be an ArrayBuffer or a Uint8Array async function bufferToBase64(buffer) { // use a FileReader to generate a base64 data URI: const base64url = await new Promise(r => { const reader = new FileReader() reader.onload = () => r(reader.result) reader.readAsDataURL(new Blob([buffer])) }); // remove the `data:...;base64,` part from the start return base64url.slice(base64url.indexOf(',') + 1); } // example use: await bufferToBase64(new Uint8Array([1,2,3,100,200]))
Live Example:
<script type="module">
const array = new Uint8Array([72,101,108,108,111,32,87,111,114,108,100]);
const encoded = encodeURIComponent(await bufferToBase64(array));
console.log(encoded);
// From: https://stackoverflow.com/a/66046176/
// note: `buffer` arg can be an ArrayBuffer or a Uint8Array
async function bufferToBase64(buffer) {
// use a FileReader to generate a base64 data URI:
const base64url = await new Promise(r => {
const reader = new FileReader()
reader.onload = () => r(reader.result)
reader.readAsDataURL(new Blob([buffer]))
});
// remove the `data:...;base64,` part from the start
return base64url.slice(base64url.indexOf(',') + 1);
}
</script>
Don't know of any native function to do it, wrote a custom encoder, it should be binary-safe:
and doing
gives the expected
... However testing shows that a lookup table is much faster:
urlencode() use about 2000 milliseconds on 10MB, and urlencode2() use about 800 milliseconds on 10MB, a lookup table more-than-doubles the performance on Edge!
And on Firefox the results are even better (in all cases, for some reason..) urlencode() use about 500 milliseconds and urlencode2() use about 61 milliseconds, a lookup table is 8 times faster on Firefox!
.. I guess function call overhead is to blame?