数据集属性 - 获取/设置正确的驼峰案例名称

Question

我将属性名称存储在字符串中的某个位置,并且需要一种方法来创建与datasetapi 一起使用的更正名称.我得到属性样式的名字,比如data-attrib-name.所以我需要将它们转换为驼峰盒并移除data-它前面.

我现在发现的最短路是下面的替换.但这对我来说有点不好意思.我的任务有更好的解决方案/更短的方式吗？

console.log(
  "data-my-test-name"
    .replace('data-', '')
    .replace(/-([a-z]?)/g, (m, g) => g.toUpperCase())
);

Answer 1

您可以直接使用setAttribute与属性而不使用dataset

var attr = "data-attrib-name";
document.getElementById("f1").setAttribute(attr, "changed"); 

各种方法:

console.log(document.getElementById("f1").dataset);
var attr = "data-attrib-name";

document.getElementById("f1").setAttribute(attr, "changed"); // set the attribute

console.log(document.getElementById("f1").dataset);

var datasetByAttr = document.querySelector("[" + attr + "]").dataset;
console.log(datasetByAttr);

<input type="text" id="f1" data-set-name="set" data-attrib-name="attr" />

如果你必须使用camelCase,你可以使用dataset你创建的元素;

var attr = "data-attrib-name",
    test = document.createElement("span");

test.setAttribute(attr, 1)
var camelCase = Object.keys(test.dataset)[0];
test = null;
console.log(camelCase);