Escape Quotes In HTML5 Data Attribute Using Javascript

Question

I\'m using jQuery\'s .data() to work with custom HTML5 data attributes where the value of the attribute needs to be able to contain both single quotes and doubl

Answer 1

If they have to be HTML strings with " and ' and whatnot, why not just make separate HTML elements for them: http://jsfiddle.net/N7XXu/.

E.g. the HTML:

<p class="example" data-which="1">a</p>

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

in combination with the following JavaScript:

$('.example').each(function() {
    var correspondingElem = $('.example-data[data-which="'
                              + $(this).data('which')
                              + '"]');
    $(this).data('example', correspondingElem.html());
});

alert($('.example').data('example'));

Of course, hide the .example-data elements.

Answer 2

Use the btoa method to set the data and the atob method to get it:

 $(document).data("test2",btoa('She said "<abbr title="What The F***">WTF<\/abbr>" on last nights show.">'))

Or simply dereference the string as a variable:

 var stringer = 'She said "<abbr title="What The F***">WTF<\/abbr>" on last nights show.">'

 $(document).data("test2",stringer);

References

• HTML5 Living Standard, Web application APIs: Base64 utility methods

Answer 3

As I use the data attribute to transport some data together with the html element from PHP to the JavaScript, I just use base64_encode on the backend , then on the client side use base64Decode(input) to get the data back. This way I avoid any and all escaping orgy. The JavasScript code I use is located here http://www.webtoolkit.info/

Answer 4

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 &quot;&lt;abbr title=&quot;What The F***&quot;&gt;WTF&lt;/abbr&gt;&quot; 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.

Answer 5

It is a little bit tricky but you can select dom objects with their data attributes that contains single quotes. The trick is \\'

<div id="text" data-message="Stanley Kubrick's Oranges">Hello</div>

<script>
    var message = "Stanley Kubrick\\'s Oranges";
    $("#text[data-message='"+message+"']").fadeOut("slow");
</script>

Fiddle

Answer 6

Here is a simple tool I created you can use to encode html:

The trick is to escape it twice.

I added an additional \n replace to preserve multiline text since it gets discarded by text().

In addition you need to escape the quotes to make it safe for a data attribute.

<div id="esc"></div>
<textarea id="escinput" placeholder="Enter text"></textarea>
<script>
    $("#escinput").bind("change paste keyup", function(){
        $("#esc").text($(this).val().replace(/\n/g,'\\n'));
        $("#esc").text($("#esc").html().replace(/"/g, '&quot;'));
    });            
</script>

This should create a data attribute safe string.

You can test it here: http://jsfiddle.net/SplicePHP/n6HFq/

To decode it back to html simply use:

<script>
    var attr = $("#idOfElement").data('attribute');
    var decoded = $('<textarea/>').html(attr).val();
</script>