将 element.dataset （一个 DOMStringMap 对象）转换为“真实的” JSON object in vanilla JavaScript？

Question

Like explained in a similar StackOverflow question , in vanilla JavaScript, I can do the following:

var data = Object.assign({}, element.dataset);

... in order to get all data-* attributes as an object.

However, the resulting object is not a "real" JSON object, booleans and numbers are surrounded by quotes.

<div id="my-element"
    data-string="It's OK."
    data-bool="true"
    data-number="10">
</div>

Here is the comparison between vanilla JavaScript and jQuery:

I supposed that in jQuery, jQuery('#my-element').data() is doing the heavy job of "lifting" the data before returing the actual JSON.

Since I'd like to use ES6 and not jQuery, and I don't want to reinvent the wheel (parsing that values using regex/conditions), I'm asking if there is a quick way to do this job .

Answer 1

The data processing in jquery is done in getData() function in data.js

here is the code from JQuery library:

function getData( data ) {
    if ( data === "true" ) {
        return true;
    }

    if ( data === "false" ) {
        return false;
    }

    if ( data === "null" ) {
        return null;
    }

    // Only convert to a number if it doesn't change the string
    if ( data === +data + "" ) {
        return +data;
    }
    //Replaced rbrace with regex value.
    if ( /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/.test( data ) ) {
        return JSON.parse( data );
    }

    return data;
}

you can use this function and update your data.