javascript - dataset attributes - getset correct camel case name - Stack Overflow

admin管理员组

文章数量:1289525

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

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

• javascript
• html
• custom-data-attribute

Share Improve this question Follow edited Jun 26, 2018 at 14:39 vsync 131k5959 gold badges340340 silver badges422422 bronze badges asked Jun 26, 2018 at 13:49 eisbehreisbehr 12.5k77 gold badges4141 silver badges6565 bronze badges 4

• 1 element.dataset.myTestName = "test" Seen as this is built into the datasetproperty, why do you need to do this?. – Keith Commented Jun 26, 2018 at 13:53
• Are you getting the property names and try to set them or are they already set and you are trying to get the value? – Luca Kiebel Commented Jun 26, 2018 at 13:54
• I have the name as a string and try to set them to elements. @Luca – eisbehr Commented Jun 26, 2018 at 13:56
• element.setAttribute("data-my-test-name", "thevalue") console.log(element.dataset.myTestName) === thevalue.. – Keith Commented Jun 26, 2018 at 13:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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>

本文标签： javascriptdataset attributesgetset correct camel case nameStack Overflow