剥离所有属性和样式的代码

Strip code of all attributes and styling

在将产品上传到我的网站时,我通常会从制造商网站复制信息并粘贴到我的网站所见即所得编辑器中。这也复制了我没有的所有属性和样式 want/need。

我创建了一个文件,去除了这段代码的所有属性和样式,以便我可以添加自己的。这是供完全不了解 HTML 的人使用,所以我想知道是否有比我选择的方法更好的方法。

当前 div 附加了一些样式,因此当它被删除时,视觉反馈表明代码已被清理。

<button>Clean up code</button>

<div class="test" id="text" style="text-transform: uppercase;">

    <!-- PASTE YOUR CODE UNDER HERE -->

</div>

<script>


$( "button" ).click(function() {
    $("p").removeAttr("class").removeAttr("id").removeAttr("style");
    $("a").removeAttr("class").removeAttr("id").removeAttr("style");
    $("img").removeAttr("class").removeAttr("id").removeAttr("style");
    $("h1").removeAttr("class").removeAttr("id").removeAttr("style");
    $("h2").removeAttr("class").removeAttr("id").removeAttr("style");
    $("h2").removeAttr("class").removeAttr("id").removeAttr("style");
    $("h2").removeAttr("class").removeAttr("id").removeAttr("style");
    $("h3").removeAttr("class").removeAttr("id").removeAttr("style");
    $("h4").removeAttr("class").removeAttr("id").removeAttr("style");
    $("h5").removeAttr("class").removeAttr("id").removeAttr("style");
    $("h6").removeAttr("class").removeAttr("id").removeAttr("style");
    $("table").removeAttr("class").removeAttr("id").removeAttr("style");
    $("td").removeAttr("class").removeAttr("id").removeAttr("style");
    $("tr").removeAttr("class").removeAttr("id").removeAttr("style");
    $("ol").removeAttr("class").removeAttr("id").removeAttr("style");
    $("ul").removeAttr("class").removeAttr("id").removeAttr("style");
    $("li").removeAttr("class").removeAttr("id").removeAttr("style");
    $("tbody").removeAttr("class").removeAttr("id").removeAttr("style");    
    $("span").removeAttr("class").removeAttr("id").removeAttr("style");
    $( "div" ).contents().unwrap();
});
</script>

您可以使用*,它基本上选择了所有元素。 removeAttrs 也可以是 space 分隔的属性列表。

$( "button" ).click(function() {
    $("*").removeAttr("class id style");
    $("div").contents().unwrap();
});