下載時如何保存html檔案并洗掉腳本和不需要的標簽？-有解無憂

我有一個 html 檔案，其中包含很多帶有 contenteditable="true" 屬性的標簽。我還在里面添加了很多jquery/js。

我想要達到的是：

讓用戶修改內容--> ok with 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-->
  <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-->
  <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-->
     <div>    
        <input type="button" id="add" value="add content">
        <input type="button" id="del" value="remove content">
      </td>
      <!--Delete-->
    

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

  <!--Delete-->
  <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-->
</body>
</html>

編輯

Thanks to the answer given below by Phentnil, I finaly also found a solution that work with a regex to delete all content between my two comment "Delete". The only problem is that it also delete the html et doctype tag..but it's working.

function myFunction() {
  clean();
  var content = document.documentElement.innerHTML;
  var searchRegExp = /\<\!\-\-Delete\-\-\>((.|[\n|\r|\r\n])*?)\<\!\-\-Delete\-\-\>[\n|\r|\r\n]?(\s )?/g;
  var replaceWith = ' ';
  var result = content.replace(searchRegExp,replaceWith);
  console.log(result);
  download(result, "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();
}

uj5u.com熱心網友回復：

將class屬性設定為類似delete并使用querySelectorAll(".delete, script"). 然后遍歷這些元素并element.remove()在你的clean()函式中使用，除了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-->

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441190.html

標籤：javascript jquery download

上一篇：當父級關閉時關閉導航的所有子級

下一篇：提交表單，不在URL中顯示引數和值？[復制]