CODEWITHSUNDEEP
javascripthtmljsonunicode
gaurav5430
gaurav5430

Reputation: 13882

Displaying special characters, HTML entities, unicode as is in rendered HTML

I am receiving an annotated json from the backend, which i need to display in UI.

The json contains strings tagged according to position and length in the content.

It may contain characters like \t \n or extra whitespaces, also html entities, unicode etc. When I try to display it in HTML, this information is lost, html entities are converted to respective values, whitespaces are reduced to single, unicode is converted to corresponding character.

I want to display the content as is, because i need to highlight the annotations and I am allowing the user to tag things as well, and if he tags them in the displayed HTML, the position and length would be different from the original json.

Example:

json:

{
"content": " \tHi there &nbsp how are you?"
}

This is displayed as "Hi there", and so if i want to highlight 'how', which is tagged at position 17, in the UI i would get it at position 10 or 11.

Also if a user wants to tag 'are', it would get tagged at 14, while the server would expect it to be tagged at 21.

EDIT:

this is what i have till now:

1) all html entities are converted as:

> --> &gt so that they get displayed as > in the rendered HTML and not >

2) \t, \r , \n are converted as:

\t --> \\t , so that it gets displayed as \t

3) i can also recognize unicode characters and convert them:

\u --> \\u , so that they get displayed as it is

but there are some other issues like, extra whitespaces, foreign characters, patterns like \x etc. i don't think i have a comprehensive list of everything, and sooner or later it might break.

Upvotes: 0

Views: 1373

Answers (2)

Mathias Bynens
Mathias Bynens

Reputation: 149534

That’s exactly what jsesc does. From the README:

jsesc is a JavaScript library for escaping JavaScript strings while generating the shortest possible valid ASCII-only output. Here’s an online demo.

Use it as follows:

var data = { "content": " \tHi there &nbsp how are you?"};
var escaped = jsesc(data.content);
// → ' \\tHi there &nbsp how are you?'

There are many options to customize the output. See the documentation for more details.

To display the jsesc output in HTML, don’t set it to an element’s .innerHTML but rather use .textContent.

Upvotes: 2

ElChiniNet
ElChiniNet

Reputation: 2902

Try this little function, add regular expressions depending on the received characters:

function html(str){
    return str.replace(/&/g, "&").replace(/\t/g, "\\t").replace(/\n/g, "\\n").replace(/\r/g, "\\r");
}

jsfiddle

Upvotes: 0

Related Questions