下载时如何保存 html 文件并删除脚本和不需要的标签？

Question

我有一个 html 文件，其中包含许多具有 contenteditable="true" 属性的标签。我也在里面加了很多jquery/js

我想要实现的是：

让用户修改内容 --> 使用 contenteditable 属性即可
让用户下载修改后的文件 --> 使用下面的代码片段就可以了
点击下载按钮时，删除“删除”和“删除结束”评论之间的所有内容，并删除所有 "contenteditable="true" 属性 --> 不行

我还发现这个下载片段比我在下面的片段中使用的要短得多，但不知道哪个更好、更安全？

<a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="index.html">Download</a>

这是我的文件示例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <!--Delete Start-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!--Delete End-->
  <title></title>
</head>

<body style="margin: 0; padding: 0 !important;background-color: #F2F2F2;">
  <div contenteditable="true">
    <p style="margin: 0 0 8px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <!--Delete Start-->
  <div>
    <input type="button" id="add" value="add content">
    <input type="button" id="del" value="remove content">
  </div>
  <!--Delete End-->


  <!--Delete Start-->
  <div>
    <a href="#" id="donwload-link" onClick="myFunction()">download html content</a>
  </div>
  <!--Delete End-->


  <!--Delete Start-->
  <script>
    function myFunction() {
      var content = document.documentElement.innerHTML;
      download(content, "index", "html")
    }

    function download(content, fileName, fileType) {
      var link = document.getElementById("donwload-link");
      var file = new Blob([content], {
        type: "html"
      });
      var donwloadFile = fileName + "." + fileType;
      link.href = URL.createObjectURL(file);
      link.download = donwloadFile
    }
  </script>
  <!--Delete End-->
</body>

</html>

Answer 1

将 class 属性设置为类似 delete 的值，并在 clean() 函数中使用 querySelectorAll(".delete, script"). Then loop through these elements and use element.remove() 除了从其他元素中删除 contentEditable .

body {
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}

p {
  margin: 0 0 8px;
}

<!--Delete Start-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--Delete End-->

<p contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<!--Delete Start-->
<div class="delete">
  <input type="button" id="add" value="add content">
  <input type="button" id="del" value="remove content">
</div>
<!--Delete End-->

<!--Delete Start-->
<div class="delete">
  <a href="#" id="download-link" onClick="myFunction()">download html content</a>
</div>
<!--Delete End-->

<!--Delete Start-->
<script>
  function myFunction() {
    clean();
    var content = document.documentElement.innerHTML;
    download(content, "index", "html");
  }

  function clean() {
    var contentToDelete = document.querySelectorAll(".delete, script");
    var editableContent = document.querySelectorAll("[contenteditable=true]");
    for (var i = 0; i < editableContent.length; i++) {
      editableContent[i].removeAttribute('contenteditable');
    }
    contentToDelete.forEach((element) => element.remove());
  }

  function download(content, fileName, fileType) {
    var link = document.createElement("a");
    var file = new Blob([content], {
      type: "html"
    });
    var downloadFile = fileName + "." + fileType;
    link.href = URL.createObjectURL(file);
    link.download = downloadFile;
    link.click();
  }
</script>
<!--Delete End-->

下载时如何保存 html 文件并删除脚本和不需要的标签？

How can I save an html file and remove script and unwanted tag when dowloading?

javascript

jquery

download