Develop Reference

Base64 encoding fails for non-latin characters

I'm working on a VueJS project where I generate SVG images based on input. After they have been generated, I send data from them to a back end API as a base64 encoded string.
Now, whenever I try to encode the string with UTF8 characters, I get the following error:
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
I tried to solve the issue with replacing all characters in the HTML with their Unicode code points. However, whenever I try to get the DOM element, the Unicode encoded characters are reverted back to their plain text format.
How can I obtain the HTML as a base64 encoded string?
The issue can be seen in a fiddle here.
I've tried both using XMLSerializer and just running innerHTML.toString():
let svgEl = this.$el.querySelector('.svg-container svg')
if (!svgEl) {
console.log('no poster element')
return
}
// Using XMLSerializer:
console.log(btoa(new XMLSerializer().serializeToString(posterEl))
// Using innerHTML:
console.log(btoa(posterEl.innerHTML.toString()))
Both the above examples yield the same error.
Thanks.

You can follow the answer steps in for this answered question:
Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
The key of solution is to encode the string by this way:
btoa(unescape(encodeURIComponent(str)));

JSON.parse get "Uncaught SyntaxError: Unexpected token h"

I get the syntax error when I try to pass the following string:
JSON.parse("[{\"Date\": \"4/4/2016 4:15:19 PM\", \"Message\":\"<h3>New
Message</h3> Generated at 4/4/2016 4:15:19 PM.<br/><br/>Heavy Responsive
URL: <a href=\"https://performingarts.withgoogle.com/en_us\" ></a><br/><br/>
<img src=\"https://s-media-cache-ak0.pinimg.com/236x/06/bd/ac/06bdacc904c12abdce3381ba1404fd7e.jpg\" /> \"} ]");
I know that the error come from the link when I use double quote.
If I use single quote then no issue, but the data is getting from server side, I got no control over what going to pass in so I can only control on my side.
From what I read from the internet so far, I tried the following:
Use JSON.stringify first, then only use JSON.parse. I can parse
with no issue but problem occur when I try to loop the data. Instead
of looping it as JSON, the loop take the data as string and loop
every single text.
Escape every double quote which I'm currently doing, but it's not
working as shown above. But if I replace every double quote to
literal, I'm afraid some of the message that suppose to be double
quote will turn into literal as well, which will result in weird
looking message.
Please advice what other alternative I have to solve this.

You have JSON embedded in a JavaScript string literal.
" and \ are special characters in JSON and are also special characters in a JavaScript string literal.
href=\"https: escapes the " in the JavaScript string literal. It then becomes a " in the JSON. That causes an error.
When you want the " as data in the JSON you must:
Escape the " for JavaScript (as you are doing already)
Escape the " for JSON by adding a \.
Escape the \ for JavaScript
href=\\\"https:

JS - JSON.parse - preserve special characters

I'm running a NodeJS app that gets certain posts from an API.
When trying to JSON.parse with special characters in, the JSON.parse would fail.
Special characters can be just any other language, emojis etc.
Parsing works fine when posts don't have special characters.
I need to preserve all of the text, I can't just ignore those characters since I need to handle every possible language.
I'm getting the following error:
"Unexpected token �"
Example of a text i'm supposed to be able to handle:
"summary": "★リプライは殆ど見てません★ Tokyo-based E-J translator. ここは流れてくるニュースの自分用記録でRT＆メモと他人の言葉の引用、ブログのフィード。ここで意見を述べることはしません。「交流」もしません。関心領域は匦"�アイルランドと英国（他は専門外）※Togetterコメ欄と陰謀論が嫌いです。"
How can I properly parse such a text?
Thanks

You have misdiagnosed your problem, it has nothing to do with that character.
Your code contains an unescaped " immediately before the special character you think is causing the problem. The early " is prematurely terminating the string.
If you insert a backslash to escape the ", your string can be parsed as JSON just fine:
x = '{"summary": "★リプライは殆ど見てません★ Tokyo-based E-J translator. ここは流れてくるニュースの自分用記録でRT＆メモと他人の言葉の引用、ブログのフィード。ここで意見を述べることはしません。「交流」もしません。関心領域は匦\\"�アイルランドと英国（他は専門外）※Togetterコメ欄と陰謀論が嫌いです。"}';
console.log(JSON.parse(x));

You need to pass a string not as an object.
Example
JSON.parse('{"summary" : "a"}');
In your case it should be like this
JSON.parse(
'{"summary" : "★リプライは殆ど見てません★ Tokyo-based E-J translator. ここは流れてくるニュースの自分用記録でRT＆メモと他人の言葉の引用、ブログのフィード。ここで意見を述べることはしません。「交流」もしません。関心領域は匦�アイルランドと英国（他は専門外）※Togetterコメ欄と陰謀論が嫌いです。"}')

Javascript multiline string causing "SyntaxError ILLEGAL"

I have a very basic function on a template that shows an alert message:
<script>
function detailer(pii_other){
alert(pii_other);
}
</script>
it is called with a string value like this:
<td><button onclick="detailer('{{other}}')">Details</button></td>
It works fine on most cases but I saw that it sometimes fails based on the content of 'other'. Uncaught SyntaxError: Unexpected token ILLEGAL on the Chrome Javascript console.
[Edit:]
I am reading the other content from a RESTful API service that returns JSON, in this case the other field has this content:
body: {
other: ""address_street"=>"江西省九江市共青城市 账号 2123123912391239 户名 齐少楠", "name"=>"test""
}
How can I prepare my code to support multiline strings in the alert ? I have no way to restrict the data input in the form.

I would do the same thing Daniel A. White suggested - convert the new lines to some string that won't evaluate to a 'real' new line in your templating engine (Jinja?). You may have to escape the new line character so that it stays on one line.

JSON.parse throws "SyntaxError: Unexpected Number" when trying to parse a single string stored in a cookie

I have this string being stored in a cookie
"d967fac49ef2466239168bbbde0a8d755a27ba81$[[\"__json_message\"\05425\054\"This is a message.\"]]"
AKA
"\"d967fac49ef2466239168bbbde0a8d755a27ba81$[[\\\"__json_message\\\"\\05425\\054\\\"This is a message.\\\"]]\""
(for pasting into a console)
but I can't parse it with JSON.parse. However, it works with eval (which is evil). The error is SyntaxError: Unexpected number.
Of note are the escaped commas. This was generated with the Django messaging API.
Does anyone know a good regex or other technique that can do this instead?
I first need to unescape the string, (because it's a proper javascript string) and then I need the array after the dollar ( s.substring(s.indexOf("$")+1) ).

Sorry for being unclear, I figured it out, thanks to jfriend00's link to json.org. Below is an equivalent string that does work, and what the proper output is supposed to be. It's an JSON array inside of an already encoded string that I needed to unescape easily.
var s = JSON.parse("\"d967fac49ef2466239168bbbde0a8d755a27ba81$[[\\\"__json_message\\\"\\u002C25\\u002C\\\"This is a message.\\\"]]\"")
// s = "d967fac49ef2466239168bbbde0a8d755a27ba81$[["__json_message",25,"This is a message."]]"
// and then I get what I actually want
var a = JSON.parse(s.substring(s.indexOf("$")+1))
The problem was that when the string was prepared for the cookie the commas were converted to a octal escape codes, which JSON doesn't allow. The error code should have been JSON forbids octal prefixes. Once that's taken care of, it'll be fine. So I'll just check for octal escape codes and replace them with hex escape codes.
TL;DR: "SyntaxError: Unexpected Number" means "SyntaxError: JSON forbids octal prefixes"
Here's the function I used
var s = "\"d967fac49ef2466239168bbbde0a8d755a27ba81$[[\\\"__json_message\\\"\\05425\\054\\\"This is a message.\\\"]]\""
var re = /\\0([0-7]{2})/g
JSON.parse(s.replace(re, function(m, n){return "\\x"+("0000"+parseInt(n,8).toString(16)).slice(-4)}))