javascript - 如何删除html标签中关联的所有属性和值

Question

您好，我想删除与 html 中的 tag 关联的所有属性值和样式

输入:

<div id="content">
   <span id="span" data-span="a" aria-describedby="span">span</span>
   <p class="a b c" style="color:black;">paragraph</p>
</div>

我的预期输出:

<div id="content">
   <span>span</span>
   <p>paragraph</p>
</div>

我尝试过的:

$(function(){
  var content = $('#content').html();
  $(content).removeAttr("style");
  $(content).html().replace(/<~="">/, "");
  console.log(content);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
       <span id="span" data-span="a" aria-        describedby="span">span</span>
       <p class="a b c" style="color:black;">paragraph</p>
    </div>

Answer 1

您可以使用 Element.getAttributeNames()获取所有名称的数组并迭代以删除它们

$('#content *').each(function(_, el) { 
  el.getAttributeNames().forEach(el.removeAttribute.bind(el));
});

console.log($('#content')[0].outerHTML)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <span id="span" data-span="a" aria-describedby="span">span</span>
  <p class="a b c" style="color:black;">paragraph</p>
</div>

注意某些浏览器需要 polyfill