我如何使用 javascript RegExp end replace 或其他方法创建具有子 div 数据属性的 div-wrapper？

Question

有一个字符串 html:

<div data-class="wrapper-class" data-id="wrapper-id" id="hello-world"> 
    <div data-id="superid" data-class="superclass" class="title">My Title</div data-class data-id> 
    <div class="description">My Desription</div>
</div data-id data-class>
<div data-id="mr-jack" id="mr-brown">Hey!</div data-id>

围绕具有数据属性的标签需要创建 div-wrapper with these data-attrs without "prefix" data-.

有一个结果字符串的例子：

<div class="wrapper-class" id="wrapper-id">
    <div id="hello-world">
        <div id="superid" class="superclass">
            <div class="title">My Title</div>
        </div>
        <div class="description">My Description</div>
    </div>
</div>
<div id="mr-jack">
    <div id="mr-brown">Hey!</div>
</div>

我可以使用 javascript RegExp end replace 还是其他方式来做？非常感谢！

Answer 1

您可以使用此功能：

function wrapAndCleanUpElement(el) {
  var wrapper = document.createElement('div')

  for (var data in el.dataset) {
    var dataValue = el.dataset[data]
    switch (data) {
      case 'id':
        wrapper.id = dataValue
        break
      case 'class':
        wrapper.className = dataValue
        break
    }

    el.removeAttribute('data-' + data)
  }

  el.parentElement.insertBefore(wrapper, el)
  wrapper.appendChild(el)
}

建议程序员自行决定。

我如何使用 javascript RegExp end replace 或其他方法创建具有子 div 数据属性的 div-wrapper？

How can I create div-wrapper with data-attributes from child div using javascript RegExp end replace or another?

html

javascript

regex

regexp-replace