JSFiddle - React, Tailwind, and code Playground

by oemebamo

HTML

<div id="source" data-key="138718128824791043">
    This is a big integer: 138718128824791043
</div>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<p>
    Dear jQuery, is 138718128824791043 numeric? <span id="f"></span>
</p>

<hr />

<p>
    jQuery.isNumeric() thinks "value" is numeric, and assumes browsers (parseFloat) are 64bit safe, but they aren't (and shouldn't according to spec).
</p>
<p>
    So, since the spec for browser is only 32 bit safe, jQuery shouldn't cast big integers in its .data()-function, right?
</p>
<hr />
<p>
    Browsers where you have 3 red divs: WebKit 5.1.1, WebKit nightly 5.1.1 (7534.51.22, r100547), Chrome 15.0.874.121, Chrome 17.0.942.0, Firefox 8.0.
</p>

CSS

div, p {
    padding: 5px;
    margin: 10px;
}

JavaScript

var value = "138718128824791043";

$('#a').html(value); // all good
$('#b').html(parseInt(value, 10)); // parseInt goes wrong
$('#c').html(parseFloat(value, 10)); // parseFloat goes wrong
$('#d').html($('#source').attr('data-key')); // all good
$('#e').html($('#source').data('key')); // jQuery's data function thinks it's numeric, and does a parseFloat, that fails
$('#f').html(jQuery.isNumeric(value) ? 'Yes it is, my dear.' : 'Nope.'); // see, I wasn't lying

var els = [$('#a'), $('#b'), $('#c'), $('#d'), $('#e')];
$(els).each(function(i, el) {
    if ($(el).html() != value) {
        $(el).css('background-color', 'red');
    }
    else {
        $(el).css('background-color', 'green');
    }
});