Different string representation in HTML and JS

Question

I have noticed some difference in representing strings in DOM passed from server as HTML attribute or as global var.

There is a string which is JSON encoded object with special chars in it and set this string in folowing ways:

<div id="my-id"
    data-opt='[{"id":"600900340","parent_id":"600900000","name":"\tCollector\u0027s Cars \u0026 Models","visible":"1","level":"3"}]'
></div>

<script>
    window.opt = '[{"id":"600900340","parent_id":"600900000","name":"\tCollector\u0027s Cars \u0026 Models","visible":"1","level":"3"}]';
</script>

Now check them with js:

;(function(window) {
    console.log(document.getElementById('my-id').dataset.opt);
    console.log(window.opt);
}(window))

Output:

[{"id":"600900340","parent_id":"600900000","name":"\tCollector\u0027s Cars \u0026 Models","visible":"1","level":"3"}]

[{"id":"600900340","parent_id":"600900000","name":" Collector's Cars & Models","visible":"1","level":"3"}]

Why are they different?

Here is jsfiddle http://jsfiddle.net/9ss5M/3/

“Why are they different?” – because you use JavaScript unicode escape syntax once in a JavaScript context (window.opt), and once in an HTML context where it is taken just literally (data-opt). — C3roe
– C3roe, Commented Nov 12, 2013 at 11:50

BoltClock · Accepted Answer · 2014-01-24 08:27:47Z

2

Because escape sequences such as \t and \u#### that have special meanings in JavaScript strings (including JSON), are meaningless in HTML attribute values.

For what it's worth, escape sequences in HTML take the form of entity references. To wit:

<div id="my-id"
    data-opt='[{"id":"600900340","parent_id":"600900000","name":"&#9;Collector&#x0027;s Cars &#x0026; Models","visible":"1","level":"3"}]'
></div>

Updated fiddle

And of course, there's the option of inserting the special characters literally as is without resorting to escape sequences as well.

edited Jan 24, 2014 at 8:27

answered Nov 12, 2013 at 11:48

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Different string representation in HTML and JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related