如何将数据集属性名称转换为数据属性名称？答案

【问题标题】：How can I convert dataset property names to data attribute names?如何将数据集属性名称转换为数据属性名称？
【发布时间】：2020-09-01 15:53:46
【问题描述】：

我有一个包含一些键和值的对象，旨在分配给 HTML 元素的 dataset 属性。我想获取从这些键生成的data attributes 的名称，如MDN dataset documentation 的“名称转换”部分中的“camelCase to dash-style”所述。

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

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

【问题讨论】：

标签： javascript html custom-data-attribute html5-data

【解决方案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 函数。

【讨论】：

【解决方案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);
});

【讨论】：

嗯...解析 HTML 似乎比我正在做的更难，更容易出错。但我喜欢这个主意。也许我可以使用test.attributes 获取属性并挑选出数据属性。
以data- 开头的正则表达式查找器并不难
好的，但是如果我执行test.dataset.myTestDataElement = 'data-something' 之类的操作呢？
已更新以包括尝试使用正则表达式逻辑来查找名称。还添加了与数据属性语法匹配的值的测试问题。 @EliasZamaria
你想用replace 电话做什么？调用它只是为了传递给它的回调的副作用，并丢弃它返回的字符串？也许match 会更好，但使用正则表达式解析 HTML 的方法对我来说似乎很脆弱。