Data attribute name with digits

Question

Is it expected that for

<div data-foo-42="bar"></div>

div the div.data() would be an empty object?

Demo: http://jsfiddle.net/nWCKt/

What are the requirements for data- attributes names?

Created a ticket in jquery bug tracker: http://bugs.jquery.com/ticket/14376

Answer 1

Seems like a jquery issue to me. The regex that replaces key is causing the issue when there is a numeric value after a hyphen separator of the attribute (Other than the first hyphen for data-). They need a way to identify numeric values that start after the attribute on a multidash data attribute.

Snippet from jquery:

function dataAttr( elem, key, data ) {
    // If nothing was found internally, try to fetch any
    // data from the HTML5 data-* attribute
    if ( data === undefined && elem.nodeType === 1 ) {

        var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); 

        data = elem.getAttribute( name );

         ....

and another one which converts data attrib name to the key used in the above place which actually converts the key to camelcase rdashAlpha = -([\da-z]), and the second replacement (.replace( rdashAlpha, fcamelCase );) considers a numeric value after a separator to be a part of the prev separator. This probably is the core culprit which ignores numeric start after second dash.

camelCase: function( string ) {
        return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
    },

Here key becomes foo42 and while replacing it with rmultiDash (which is /[A-Z]/) becomes foo42 so there is no attribute with the name data-foo42 it is data-foo-42 instead. I think they need to have some identifier (similar to capitalization of the key for the first char after hash) to represent starting numerals after the hash.

<div  data-foo-42="bar" data-foo-tfs="tf"></div>

returns {fooYui: "bar"} skips the first attribute.

<div data-foo-d42="bar" data-foo-YUI="bar"></div>

returns {fooD42: "bar", fooYui: "bar"}

using jquery 1.10.1