2

I have an object with some keys and values, intended to be assigned to the dataset property of an HTML element. I would like to get the names of the data attributes that would be produced from those keys, as described where it says "camelCase to dash-style" in the "Name Conversion" section of the MDN dataset documentation.

How can I convert from dataset property names to data attribute names? I came up with something that works, which I put in an answer, but I'm wondering if there is a simpler or more elegant way, maybe involving a built-in function that I somehow overlooked.

I am looking for either a function that converts an individual name, or a function that converts an object with key-value pairs.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Elias Zamaria
  • 96,623
  • 33
  • 114
  • 148

2 Answers2

1

My function for converting an individual name:

const dataAttributeFromDatasetProperty = attr =>
    `data-${attr.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)}`;

My function for converting an object:

const dataAttributesFromDataset = dataset =>
    _.mapKeys(
        dataset,
        (value, attr) => `data-${attr.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)}`
    );

It uses lodash's _.mapKeys function.

Elias Zamaria
  • 96,623
  • 33
  • 114
  • 148
-1

I mean, theoretically you could just get the .outerHTML and grab the data tags off of it that way.

var test = document.createElement('span');

test.dataset.myTestDataElement = 'weee';
test.dataset.mySecondThing = 'data-test do not match me';

var html = test.outerHTML;

html.replace(/(data-[^=]+)=/g, function(_, name, _, _){
  console.log(name);
});
Taplar
  • 24,788
  • 4
  • 22
  • 35
  • Hmmm... parsing the HTML seems even harder and more error-prone than what I'm doing. But I like the idea. Maybe I can get the attributes using `test.attributes` and pick out the data attributes. – Elias Zamaria May 15 '20 at 18:18
  • A regex finder for starts with `data-` isn't that difficult – Taplar May 15 '20 at 18:19
  • OK, but what if I do something like `test.dataset.myTestDataElement = 'data-something'`? – Elias Zamaria May 15 '20 at 18:20
  • Updated to include an attempt at regex logic to find the names. Also added your test issue of the value matching the syntax of a data attribute. @EliasZamaria – Taplar May 15 '20 at 18:25
  • What are you trying to do with that `replace` call? Calling it just for the side effects of the callback passed to it, and throwing away the string it returns? Maybe `match` would be better, but the approach of using a regex to parse HTML seems fragile to me. – Elias Zamaria May 15 '20 at 18:31
  • Obligatory comment about using regexes to parse HTML: https://stackoverflow.com/a/1732454/28324 – Elias Zamaria May 15 '20 at 18:31
  • *shrug* Up to you. I'm just offering the suggestion. – Taplar May 15 '20 at 18:33
  • OK. Sorry if I sounded snarky. I felt that if I didn't link to that famous HTML-parsing regex post, someone else would have done it. – Elias Zamaria May 15 '20 at 18:38
  • Nah, it's all good. I did put "theoretically" in my original answer for a reason, :) – Taplar May 15 '20 at 18:39