Displaying partially Unicode encoded data via AJAX/innerHTML

Question

Hello everyone,

I am trying to get some data from the server via an AJAX call and then displaying the result using responseDiv.innerHTML. The data from the server comes partially encoded with Unicode elements, like: za\u010Dat test. By setting the innerHTML of the response div, this just displayed as is. That is, the Unicode is not converted to an actual representation in the browser.

The charset of the containing page is set to UTF-8. I have tried most other things, like converting the unicode representation to HTML entities, but that doesn't seem to work either.

I should also mention that the text coming from the server has HTML tags intermixed as well. The HTML tags are honored as they should be. For example, if the text from the server comes as <b>Bold this!</b>, the text is bolded.

Any help appreciated.

Vikram

Answer 1

Can you replace '\u010D' with 'č'?

AFAIK the HTML tags coming from the server should work if you are setting the innerHTML.

This works for me:

document.getElementById('info').innerHTML = "&#x010D; <b>Bold this</b>";

BTW - you can use something like Fiddler or Firebug to ensure you are getting what you expect from the server.

Update: use regular expressions to find and replace the unicode characters with HTML entities:

$.get('data.txt', function(data) {
    data = data.replace(/\\u([0-9A-F])([0-9A-F])([0-9A-F])([0-9A-F])/g, '&#x$1$2$3$4;');
    document.getElementById('info').innerHTML = data;
});

Answer 2

Just convert the unicode literals to characters directly:

'H\u0065\u006Clo, world!'.replace(/\u([0-9a-fA-F]{4})/, function() {
    return String.fromCharCode(parseInt(arguments[1],16));
});