Escaping/Encoding Single Quotes in JSON Encoded HTML5 Data Attributes

Escaping/encoding single quotes in JSON encoded HTML5 data attributes

You need to HTML escape data echoed into HTML:

printf('<article data-tags="%s">',
    htmlspecialchars(json_encode(array('html5', ...)), ENT_QUOTES, 'UTF-8'));

Escape Quotes In HTML5 Data Attribute Using Javascript

There is no way around it, you have to escape the values properly, or the HTML can't be parsed properly. You can't use Javascript to correct the code after it is parsed, because then it has already failed.

Your example with proper HTML encoding would be:

<p class="example" data-example="She said "<abbr title="What The F***">WTF</abbr>" on last night's show.">

You can't use backslash to escape characters, because it's not Javascript code. You use HTML entities to escape characters in HTML code.

If you can't control how the data is input, then you are screwed. You simply have to find a way to take control over it.

Problems doing simple echo

Have you tried something like this?

echo "<a class=\"lightbox\" href=\"img/projects/generic/project-16.jpg\" data-plugin-options=\"{'type':'image', 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}\">"; 

Prefixing double quote in double quoted string with backslash (\") will insert it into the string itself and prevent it from stopping the string block.

Edit: Taking @Barmar's comment into account, it should be more like this to keep data-plugin-options's data as valid JSON, thus enclosing it in single quotes:

echo "<a class=\"lightbox\" href=\"img/projects/generic/project-16.jpg\" data-plugin-options='{\"type\":\"image\", \"mainClass\": \"mfp-with-zoom\", \"zoom\": {\"enabled\": true, \"duration\": 300}}'>";

So to sum it up, PHP does not support escaping double quotes with "", \" needs to be used instead. (analogically \' has to be used for single quotes strings)

How can I straightforwardly include JSON in an HTML5 data-* attribute so that the JSON remains human-readable as well as machine-readable?

One straightforward human-readable approach is to use angular quotes:

data-menu="{«chosenStarter» : «bhajis», «chosenMain» : «madras», «chosenDessert» : «kulfi»}"

and then convert to JSON with:

const myJSON = myElement.dataset.menu.replace(/«|»/g, '"');

Single quotes in data attribute containing json

You can use " instead of ". But quoting orgies are horrible (in HTML even more than in PHP) so better go with single-quoting your html attributes.

BTW, you do not need to use .parseJSON - jQuery does that automatically if the data- attribute starts with { (actually, it's more complex - here's the regex it uses to test if it should be parsed as JSON: ^(?:\{.*\}|\[.*\])$).

Escape/Special Characters from user input to HTML5 data-attributes using URL Encode/Decode

After much research I found the solution I was looking for. If you want to use escape/special characters in html5 data-attributes than a great solution would be to use encodeURI()/decodeURI(): http://www.w3schools.com/jsref/jsref_decodeuri.asp

Solution for this question:

Encoded url version of the value and set the value for select:

$.each(data, function(i, val) {
     var uri = val.typeName;
     var res = encodeURI(uri);
     var output = '<option id="' + this.qfInvoiceNum + '" class="type" data-name="' + res + '" >' + this.typeName +' | #' + this.qfInvoiceNum +'</option>';
     $('select#typeList').append(output);
    }); 

On select, grab the encoded uri, then decode uri

$('.selectChange2').change(function() {
    uriTypeGrab = $('select option.type:selected').data('name');
    typeGrab = decodeURI(uriTypeGrab);
});

typeGrab is now in the correct format with all of the escape/special characters and ready to pass to JSON.stringify() for the ajax call.

Escaping/encoding single quotes in JSON encoded HTML5 data attributes

You need to HTML escape data echoed into HTML:

printf('<article data-tags="%s">',
    htmlspecialchars(json_encode(array('html5', ...)), ENT_QUOTES, 'UTF-8'));

---

Related Topics