2
私は何か具体的なことをしようとしており、それが可能であるかどうかはわかりません。私はそれがどのように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編集を保存する方法については、これと可能ですか？
私は2つの機能が必要と思われます。 1つは、ロードされたデータファイルと一致する形式で変更を出力することであり、もう1つは変更を保存することです。これが意味をなさない場合は、コメントしてください、私は明確にすることができます。これは、完全にローカルな環境で行われることに注意してください。