如何使用JavaScript RegExp結束替換或另一個從子div創建數據屬性的div包裝？

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> 

各地的數據屬性標籤需要用這些數據創建ATTRS DIV-包裝無「前綴」 數據 -。

有結果字符串的示例：

<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正則表達式最終取代或者以其他方式做到這一點？ 非常感謝！

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) 
} 

程序員自由裁量權建議。