What is the best method for encoding non-ASCII characters in JSON.stringify as ASCII-safe escaped characters (\uXXXX) without the need for additional post-processing?

Question

What is the best method for encoding non-ASCII characters in JSON.stringify as ASCII-safe escaped characters (\uXXXX) without the need for additional post-processing?

In order to send characters like ü to the server as unicode characters but in an ASCII-safe string format, I need them to be represented as \u00fc with 6 characters, rather than displaying the character itself. However, no matter what I try, after using JSON.stringify, it always reverts back to displaying ü.

If I attempt to input 2 backslashes like \\u00uc, then the JSON string will also display 2 backslashes which is not ideal.

An important limitation: I am unable to modify the string after using JSON.stringify due to it being a part of the framework without any available workarounds or options to fork the entire package.

Is there a way to achieve this? If so, how can it be done?

javascript json

Answer 1

Answer №1

If you need your JSON data to be ASCII-safe, simply replace any non-ascii characters after encoding.

var data = {"name":"füßchen", "numbers": [1,2,3]}

var jsonData = JSON.stringify(data)
jsonData  = jsonData.replace(/[\u007F-\uFFFF]/g, function(character) {
    return "\\u" + ("0000" + character.charCodeAt(0).toString(16)).substr(-4)
})

document.write(jsonData);
document.write("<br>");
document.write(JSON.parse(jsonData));

Answer 2

If you need your JSON data to be ASCII-safe, simply replace any non-ascii characters after encoding.

var data = {"name":"füßchen", "numbers": [1,2,3]}

var jsonData = JSON.stringify(data)
jsonData  = jsonData.replace(/[\u007F-\uFFFF]/g, function(character) {
    return "\\u" + ("0000" + character.charCodeAt(0).toString(16)).substr(-4)
})

document.write(jsonData);
document.write("<br>");
document.write(JSON.parse(jsonData));

Answer 3

Answer №2

Here is a helpful solution to achieve your desired outcome. My approach was inspired by the following question: How can I convert a Unicode string to JavaScript escape?

var obj = {"key":"ü"};
var str1 = JSON.stringify(obj);
var str2 = "";
var chr = "";
for(var i = 0; i < str1.length; i++){
    if (str1[i].match(/[^\x00-\x7F]/)){
        chr = "\\u" + ("000" + str1[i].charCodeAt(0).toString(16)).substr(-4);
    }else{
        chr = str1[i];
    }
    str2 = str2 + chr;
}  
console.log(str2)

Additionally, it may be beneficial for you to consider @t.niese's suggestion about handling this on the server side.

Answer 4

Here is a helpful solution to achieve your desired outcome. My approach was inspired by the following question: How can I convert a Unicode string to JavaScript escape?

var obj = {"key":"ü"};
var str1 = JSON.stringify(obj);
var str2 = "";
var chr = "";
for(var i = 0; i < str1.length; i++){
    if (str1[i].match(/[^\x00-\x7F]/)){
        chr = "\\u" + ("000" + str1[i].charCodeAt(0).toString(16)).substr(-4);
    }else{
        chr = str1[i];
    }
    str2 = str2 + chr;
}  
console.log(str2)

Additionally, it may be beneficial for you to consider @t.niese's suggestion about handling this on the server side.

Answer 5

Answer №3

To alter how JSON.stringify behaves, you can implement a custom toJSON method for the specific scenario. More information on this can be found at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#tojson_behavior

If an object contains a function as its toJSON method, using JSON.stringify will utilize the output of that method instead of the usual serialization process. You can incorporate this technique with strategies mentioned in other solutions to achieve the desired outcome, even if a library does not offer customization options by default.

(However, keep in mind that a third-party library may potentially override this behavior.)

Answer 6

To alter how JSON.stringify behaves, you can implement a custom toJSON method for the specific scenario. More information on this can be found at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#tojson_behavior

If an object contains a function as its toJSON method, using JSON.stringify will utilize the output of that method instead of the usual serialization process. You can incorporate this technique with strategies mentioned in other solutions to achieve the desired outcome, even if a library does not offer customization options by default.

(However, keep in mind that a third-party library may potentially override this behavior.)

What is the best method for encoding non-ASCII characters in JSON.stringify as ASCII-safe escaped characters (\uXXXX) without the need for additional post-processing?

Answer №1

Answer №2

Answer №3

Similar questions

Utilize the existing code to prevent multiple form submissions

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

Steps for converting JSON data to an HTML table using an .each loop

"Exploring the world of jest.doMock: A guide to mocking

What is the reason my answer for the powerset problem is flawed? Both my recursive and iterative methods are attached for review

Requesting multiple parts with Retrofit 2.0 on Android is taking an excessive amount of time

Is there a solution for retrieving POCOs in WCF Data Services 5.0?

Get a single object from an array with .single method provided by @ngrx

I require assistance in converting a .textpb file to JSON format, which includes nested input structures

Asynchronous operations in Node.js with Express

Looking for the best JSON database library?

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

Three.js - Troubleshooting: Imported OBJ model displaying partially transparent triangles

What distinctions can be observed between interacting with the Jira Rest API manually compared to through programming?

Looking to display user data within a specific div using JavaScript? Check out my code!

When serializing with Json.NET, JsonConvert.SerializeObject can include a comment in the generated output

Ways to address observables in Angular in a manner similar to deferred objects

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Trouble arises when trying to load angular ui-bootstrap using require.js unless I change the name to ui.bootstrap

looking to display the latest status value in a separate component