如何將本地HTML的內容保存（更改）爲文本文件？

我想做一些具體的事情，我不知道這是可能的。我已經看到它回答瞭如何do with a textarea，但不是因爲我問。如何將本地HTML的內容保存（更改）爲文本文件？

我的代碼加載一個文本文件，並根據內容設置一個項目符號列表。可以使用JQuery-UI對項目符號列表進行排序（拖動&），並使用contenteditable="true"進行編輯。下面是完成此代碼：

window.onload = function() { 
 
var fileInput = document.getElementById('fileInput'); 
 
var fileDisplayArea = document.getElementById('fileDisplayArea'); 
 

 
$(function() { 
 
$("#sortable1").sortable({ 
 
    items: "li:not(.ui-state-disabled)" 
 
}); 
 
$("#sortable2").sortable({}); 
 
}); 
 

 
fileInput.addEventListener('change', function(e) { 
 
var file = fileInput.files[0]; 
 
var textType = /text.*/; 
 
if (file.type.match(textType)) { 
 
var reader = new FileReader(); 
 
reader.onload = function(e) { 
 
var file = reader.result; 
 
var ul = document.createElement('ol'); 
 
test = file.replace(/(\})/gim, "\n</li>") 
 
      .replace(/\{/gim, "") 
 
      .replace(/!Variable=(\w+)\s*\n/gim, "<li class='ui-state-default'>$1</li>\n").split(/\s*\n\s*\n/) 
 
      .map(v => v = '\n<li class="ui-state-default ui-state-disabled" style="color:blue; margin-left: 0; opacity:1;">' + v) 
 
      .join(''); 
 
console.log(ul.innerHTML); 
 
htmlcontent = "<ul contenteditable='true' id='sortable2'>" + test + "</ul>"; 
 
ul.innerHTML = htmlcontent; 
 
fileDisplayArea.innerHTML = ul.innerHTML; 
 
console.log(htmlcontent); 
 

 
$("#sortable1").sortable({ 
 
    items: "li:not(.ui-state-disabled)" 
 
}); 
 

 
$("#sortable2").sortable({ 
 
    cancel: ".ui-state-disabled" 
 
}); 
 

 
$("#sortable1 li, #sortable2 li").disableSelection(); 
 

 
if (localStorage.userEdits != null) 
 
document.getElementById("edit").innerHTML = localStorage.userEdits; 
 
} 
 

 
reader.readAsText(file); 
 
} else { 
 
fileDisplayArea.innerText = "File not supported!" 
 
} 
 
}); 
 
}

#sortable1, 
 
#sortable2 { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    zoom: 1; 
 
} 
 

 
#sortable1 li, 
 
#sortable2 li { 
 
    margin: 0 5px 5px 20px; 
 
    padding: 3px; 
 
    width: 90%; 
 
} 
 

 
.ui-state-disabled li { 
 
    color: green; 
 
    margin: 0 5px 5px 0px; 
 
} 
 

 
.ui-state-default li { 
 
    margin-left: 10%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
    <body> 
 
    <input type="file" id="fileInput"> 
 
    <div id="fileDisplayArea"></div> 
 
    </body> 
 

 
</html>

的代碼加載此格式的文本文件：

FAVORITE SITES { 
!Variable=eBay 
!Variable=Google 
} 

AVOIDED SITES { 
!Variable=Yahoo 
!Variable=CraigsList 
} 

OTHER SITES { 
!Variable=Alexa 
!Variable=Amazon 
!Variable=Jet 
} 

MORE SITES { 
!Variable=StackOverflow 
!Variable=Expedia 
!Variable=MouseCity 
}

而且符號列表輸出結果。使用排序和編輯，我可以重新排列列表並編輯/添加項目符號（您可以看到是否測試代碼段並保存要加載的文本示例）。問題是，在進行排序和編輯之後，是否有方法將更改保存迴文本文件？我知道有限制，但它甚至可以保存爲新文件或提示，以便我可以選擇保存位置並覆蓋舊文件。但是，這是可能的和任何想法如何保存HTML編輯？

我想有兩個功能需要。一種是輸出與加載的數據文件一致的格式的變化，另一種是保存它們。如果這沒有意義，請評論，我可以澄清。應該指出，這是在完全本地的環境中完成的。

來源

2017-08-17 Disciple Day

此代碼用於將更改後的HTML保存爲文本文件。

function savehtml() { 
    var htm = document.body.appendChild(
     document.createElement("htm") 
    ); 
    htm.download = "demo.txt"; 
    htm.href = "data:text/plain," + document.getElementById("fileDisplayArea").innerHTML; 
    htm.click(); 
}

通過調用該功能：

<button onClick="savehtml()">Save HTML as Text</button>

來源

2017-08-17 21:05:42

如何將本地HTML的內容保存（更改）爲文本文件？

回答

相關問題