最简洁的方法去字符串化HTML和提取数据属性？[副本]

Question

我有一些HTML代码作为字符串。例如，

<button data-a=12 data-b=444 data-c='xyz'>Reply</button>

这个字符串存储在JavaScript中的一个变量中。字符串中可以有任意数量的数据属性。每个属性的值可以是任何值。对于这种情况，我必须提取特定属性的值，例如data-b。

除了明显的字符串操作之外，是否有一种更简洁的方法可以用jQuery去字符串化这个“字符串”HTML代码并提取数据属性值？有没有其他更好的方法来做到这一点？就效率和可读性而言，哪一个是最好的？

Answer 1

我的做法是（我猜是更通用的）创建虚拟元素，而不是将其属性提取到对象中，然后按名称访问任意属性:

null

const str = `<button data-a=12 data-b=444 data-c='xyz'>Reply</button>`

const wrapper = document.createElement('div')

wrapper.innerHTML = str

const result = [...wrapper.children[0].attributes]
        .reduce((acc, {name, value}) => 
          (acc[name] = value, acc), {})

console.log(result)

Answer 2

为了优雅起见，我更喜欢使用domparser:

null

const str = `<button data-a=12 data-b=444 data-c='xyz'>Reply</button>`;
const { b } = new DOMParser().parseFromString(str, 'text/html').querySelector('button').dataset;
console.log(b);