javascript - 如何将数据集属性名称转换为数据属性名称？

Question

我有一个带有一些键和值的对象，旨在分配给datasetHTML 元素的属性。我想获取将从这些键生成的数据属性的名称，如MDN 数据集文档的“名称转换”部分中的“camelCase to dash-style”所述。

如何从数据集属性名称转换为数据属性名称？我想出了一些可行的方法，并给出了答案，但我想知道是否有更简单或更优雅的方法，可能涉及我以某种方式忽略的内置函数。

我正在寻找一个转换单个名称的函数，或者一个转换具有键值对的对象的函数。

Answer 1

我用于转换个人姓名的功能：

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

我用于转换对象的功能：

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

它使用 lodash 的_.mapKeys功能。

Answer 2

我的意思是，理论上你可以通过.outerHTML这种方式获取并抓取数据标签。

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);
});