我正在尝试做一些具体的事情，但我不确定是否可行。我已经看到它回答了如何 do with a textarea但不是我问的那样。
我的代码加载一个文本文件并根据内容设置元素符号列表。元素符号列表既可以使用 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 编辑的任何想法？
我想需要两个函数。一种是以与加载的数据文件一致的格式输出变化，另一种是保存它们。如果这没有意义，请发表评论，我可以澄清。应该注意这是在完全本地环境中完成的。
最佳答案
此代码用于将更改后的 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>
关于javascript - 如何将本地 HTML 的内容保存(更改)为文本文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45736371/