时间戳

首页 > 解决方案 > 如何删除html中标签中关联的所有属性和值

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

问题描述

嗨，我想删除与tagin关联的所有属性值和样式html

输入：

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

标签： javascriptjquerynode.js

解决方案

您可以使用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

推荐阅读