I have attribute names stored somewhere in a string and need a way to create corrected names to use with dataset
api. I get the names of those in attribute style, like data-attrib-name
. So I need to convert them to camel case and remove the data-
in front of it.
The shortest way I found out for now is my replace below. But this feel kinda hacky to me. Is there a better solution / shorter way for my task?
console.log(
"data-my-test-name"
.replace('data-', '')
.replace(/-([a-z]?)/g, (m, g) => g.toUpperCase())
);
You can use setAttribute with the attribute directly without using the dataset
var attr = "data-attrib-name";
document.getElementById("f1").setAttribute(attr, "changed");
Various methods:
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" />
If you MUST use camelCase, you can use the dataset
on an element you create;
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);
Here is an example, of setting and getting, via attribute & dataset.
const sets = [
{name: "data-my-test", value: "value 1"},
{name: "data-another-test", value: "value 2"}
];
const d = document.querySelector("div");
sets.forEach(i => d.setAttribute(i.name, i.value));
console.log(d.dataset);
<div>
look at my data attributes, via inpector.
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With