如何将本地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的内容保存（更改）为文本文件？

回答

相关问题