如何解决 JSON 解析错误“JSON.parse: 字符串文字中的错误控制字符”？

Question

In NodeJS Backend, I send my data to client as:-

res.end(filex.replace("<userdata>", JSON.stringify({name:user.name, uid:user._id, profile:user.profile}) ))

//No error here and Object is stringified perfectly //user is object returned in mongoDB's result

The JSON string looks like this:

{"name":"Rishavolva","uid":"5f3ce234fd83024334050872","profile":{"pic":{"small_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ4fSx7ImRiX25hbWUiOiJpZnJkYjAwMiIsInRhYmxlIjoiRklMRSIsImlkIjo0OH1dLCJ1aWRfd2hpdGVsaXN0IjoiKiIsImlhdCI6MTU5ODE2MzMzNX0.9NkGnEumn4JW8IN0KFgxgN_6_4wN8qOgezNTyzz9osY","big_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ3fSx7ImRiX25hbWUiOiJpZnJkYjAwMiIsInRhYmxlIjoiRklMRSIsImlkIjo0N31dLCJ1aWRfd2hpdGVsaXN0IjoiKiIsImlhdCI6MTU5ODE2MzMzNX0.yxQ1GrhLsWPn8Qwu42EfTDXqaYwFtrM6f_7cAH2eLRY"},"aboutme":"I am Rishav Bhowmik\r\nand this is navratna pulaow"}}

and that UID is just a mongodb's primary key as string, and other two base 64 strings are just JWT tokens.

Now, when this JSON string reaches the Browser, I parse it with simple:

JSON.parse(`<userdata>`)
//remember I used filex.replace("<userdata>", JSON.stringify...) in the server

For reference, my MongoDB Document here is:

Now when JSON.parse is executed on the JSON string it will look like this on final JS code.

JSON.parse(`{"name":"Rishavolva","uid":"5f3ce234fd83024334050872","profile":{"pic":{"small_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ4fSx7ImRiX25hbWUiOiJpZnJkYjAwMiIsInRhYmxlIjoiRklMRSIsImlkIjo0OH1dLCJ1aWRfd2hpdGVsaXN0IjoiKiIsImlhdCI6MTU5ODE2MzMzNX0.9NkGnEumn4JW8IN0KFgxgN_6_4wN8qOgezNTyzz9osY","big_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ3fSx7ImRiX25hbWUiOiJpZnJkYjAwMiIsInRhYmxlIjoiRklMRSIsImlkIjo0N31dLCJ1aWRfd2hpdGVsaXN0IjoiKiIsImlhdCI6MTU5ODE2MzMzNX0.yxQ1GrhLsWPn8Qwu42EfTDXqaYwFtrM6f_7cAH2eLRY"},"aboutme":"I am Rishav Bhowmik\r\nand this is navratna pulaow"}}`)

I get this error:

Uncaught SyntaxError: JSON.parse: bad control character in string literal at line 1 column 702 of the JSON data

the string at position 702 of the JSON string is \\n

First of all, how can \\n be a control character?

What should I do to resolve this? Has this problem arrised due to MONGODB result?

Answer 1

\\n is a control character signifying a new line. In JSON, those control characters (more specifically the \\ ) must be escaped inside strings.

This will raise the error:

JSON.parse(`{"hello":"world\n"}`)

This wont:

   JSON.parse(`{"hello":"world\\n"}`)

So one way would be to use something like replace to ensure your aboutme is properly escaped before JSON serialization. See: How to escape a JSON string containing newline characters using JavaScript?

Answer 2

Ok have done some experimentation and have a solution. The Trick is to do JSON.stringify() twice,

Like,

html_text.replace('/*<whatever>*/', JSON.stringify( JSON.stringify(the_object) ) )

If suppose html_text has a line which is

<script>
const object_inbrowser = JSON.parse(/*<whatever>*/)
// no need to add qotes, `JSON.stringify` in the server will do that for you
</script>