I'd like to use array as data-*
attribute and a lot of StackOverflow answers suggest that I should use JSON.stringify()
;
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?
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.
You should use the library json2. js .
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.
Stringify a JavaScript ObjectUse the JavaScript function JSON. stringify() to convert it into a string. const myJSON = JSON. stringify(obj);
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.
The encodeURIComponent () method encodes special characters including: , / ? : @ & = + $ # Use the decodeURIComponent () function to decode an encoded URI component.
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.
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.
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<
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With