I'd like to use array as data-* attribute and a lot of StackOverflow answers suggest that I should use JSON.stringify();

• How to pass an array into jQuery .data() attribute
• Store and use an array using the HTML data tag and jQuery
• etc.

So, if I have this array: ['something', 'some\'thing', 'some"thing'] it will be parsed to "["something","some'thing","some\"thing"]" and therefore it won't fit neither data-*='' nor data-*="" because either ' or " will break the HTML tag.

Am I missing something or encodeURIComponent() is a true solution to encoding arrays like that? Why in other StackOverflow answers nobody noticed this?

I'd like to use array as data-* attribute and a lot of StackOverflow answers suggest that I should use JSON.stringify();

• How to pass an array into jQuery .data() attribute
• Store and use an array using the HTML data tag and jQuery
• https://gist.github./charliepark/4266921
• etc.

So, if I have this array: ['something', 'some\'thing', 'some"thing'] it will be parsed to "["something","some'thing","some\"thing"]" and therefore it won't fit neither data-*='' nor data-*="" because either ' or " will break the HTML tag.

Am I missing something or encodeURIComponent() is a true solution to encoding arrays like that? Why in other StackOverflow answers nobody noticed this?

• javascript
• json

Share Improve this question Follow edited May 23, 2017 at 12:23 CommunityBot 111 silver badge asked Aug 16, 2014 at 20:00 JimseaJimsea 69611 gold badge77 silver badges1313 bronze badges 3

• Do you want to generate HTML code using JavaScript, or why are you asking about encodeURIComponent …? – C3roe Commented Aug 16, 2014 at 20:26
• you can simply tack a property onto an element, including arrays. that would prevent plications from parsing html. – dandavis Commented Aug 16, 2014 at 21:26
• 1 No, I just want to put a value that uses both " and ' as a value of a data-* attribute. – Jimsea Commented Aug 16, 2014 at 21:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The reasoning that JSON.stringify is not guaranteed to be safe in HTML attributes when the text is part of the HTML markup itself is valid. However, there is no escaping issue if using one of the access methods (eg. .data or .attr) to assign the value as these do not directly manipulate raw HTML text.

While encodeURIComponent would "work" as it escapes all the problematic characters, it both results in overly ugly values/markup and requires a manual decodeURIComponent step when consuming the values - yuck!

Instead, if inserting the data directly into the HTML, simply "html encode" the value and use the result as the attribute value. Such a function es with most server-side languages, although an equivalent is not supplied natively with JavaScript.

Assuming the attribute values are quoted, the problematic characters that need to be replaced with the appropriate HTML entities are:

• & - &, escape-the-escape, applied first
• " - ", for double-quoted attribute
• ' - ', for single-quoted attribute
• Optional (required for XML): < and >

Using the above approach relies on the parsing of the HTML markup, and the automatic decoding of HTML entities therein, such that the actual (non-encoded) result is stored as the data-attribute value in the DOM.