Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

encodeURIComponent() vs JSON.stringify() in data-* attribute

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.com/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?

like image 200
Jimsea Avatar asked Aug 16 '14 20:08

Jimsea


People also ask

What does JSON Stringify () method do?

The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

What can I use instead of Stringify?

You should use the library json2. js .

Can you JSON Stringify a function?

The JSON. stringify() function, as name suggests, converts a JavaScript value to a serialized JSON string. JSON. stringify() can optionally use a replacer function to replace values using custom logic.

How do you Stringify a variable in JavaScript?

Stringify a JavaScript ObjectUse the JavaScript function JSON. stringify() to convert it into a string. const myJSON = JSON. stringify(obj);

What is JSON stringify () method in JavaScript?

The JSON.stringify () method in Javascript is used to create a JSON string out of it. While developing an application using JavaScript, many times it is needed to serialize the data to strings for storing the data into a database or for sending the data to an API or web server.

What is encodeURIComponent () method in JavaScript?

The encodeURIComponent () method encodes special characters including: , / ? : @ & = + $ # Use the decodeURIComponent () function to decode an encoded URI component.

How to escape characters in JSON stringify?

JSON.stringify doesn't escape characters, it just returns you string representation and as you are using it in url you need to escape it using encodeURIComponent. Yes. The JSON is expressed as a text and you are adding it as a component of a URI, so you should.

Is JSON stringify the best way to compare two objects?

Although it works without installing libraries or packages from npm, JSON.stringify certainly isn’t the best option to compare objects. The JavaScript community has some other methods for object comparison: Deep’s Equal. Lodash’s isEqual.


1 Answers

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 comes 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.

like image 160
user2864740 Avatar answered Oct 18 '22 11:10

user2864740