编辑，保存，自修改HTML文件; 格式生成的HTML，JavaScript的编辑，保存，自修改

动机： https://stackoverflow.com/questions/28120689/create-self-modifying-html-page-on-box

错误：字符串逸出，格式化html ， js由初始产生的编辑，保存html ， js

例如，

a）如果打开“saveFile.html”在本地浏览器;

b）中输入“ABC”到textarea ;

c）点击save file按钮;

d）单击Save在Save File对话框;

E） file-*[date according to universal time].html保存到磁盘;

F）打开file-*[date according to universal time].html在浏览器;

克）型“DEF”到textarea ;

1H）重复d）中，e），f）项;

ⅰ）错误：在结果第二file-*[date according to universal time].html确实显示textarea含有“ABC DEF”的文本内容; button在不显示html ：

// at rendered `html` from second `file-*[date according to universal time].html`
// `textarea` containing "abc def" displayed here , 
// `button` _not_ displayed ; following string displayed following `textarea`:
');"console.log(clone);var file = new Blob([clone], {'type':'text/html'});a.href = URL.createObjectURL(file);a.download = 'file-' + new Date().getTime() + '.html';a.click();};

在线路26中产生，“saveFile.html”

+ "var clone = '<!doctype html>'+ document.documentElement.outerHTML.replace(/<textarea>.*<.+textarea>/, '<textarea>'+document.getElementsByTagName('textarea')[0].value+'<\/textarea>');"

“saveFile.html” V 1.0.0

HTML，JS

<!doctype html>
<html>
<!-- saveFile.html 1.0.0 2015 guest271314 edit, save `html` document -->
<head>
</head>
<body>
<textarea>
</textarea>
<button>save file</button>
<script type="text/javascript">
var saveFile = document.getElementsByTagName("button")[0];
var input = document.getElementsByTagName("textarea")[0];
var a = document.createElement("a");

saveFile.onclick = function(e) {

  var clone = ["<!doctype html><head></head><body><textarea>"
              + input.value
              + "</textarea>"
              + "<button>save file</button>"
              + "<script type='text/javascript'>"
              + "var saveFile = document.getElementsByTagName('button')[0];"
              + "var input = document.getElementsByTagName('textarea')[0];"
              + "var a = document.createElement('a');"
              + "saveFile.onclick = function(e) {"
              + "var clone = '<!doctype html>'+ document.documentElement.outerHTML.replace(/<textarea>.*<.+textarea>/, '<textarea>'+document.getElementsByTagName('textarea')[0].value+'<\/textarea>');"
              + "console.log(clone);"
              + "var file = new Blob([clone], {'type':'text/html'});"
              + "a.href = URL.createObjectURL(file);"
              + "a.download = 'file-' + new Date().getTime() + '.html';"
              + "a.click();"
              + "};"
              + "</scr"+"ipt>"
              + "</body>"
              + "</html>"];

  var file = new Blob([clone], {"type":"text/html"});  
  a.href = URL.createObjectURL(file);
  a.download = "file-" + new Date().getTime() + ".html";
  a.click();  

};
</script>
</body>
</html>

Answer 1:

你替换函数替换，直到/textarea>是在你的clone变量。因为有在HTML文本区域的后一个换行符它不从第一个文件做到这一点。解决它的方法之一是增加一个newline中生成的HTML字符。像这样：

var clone = ["<!doctype html><head></head><body><textarea>"
          + input.value
         // add newline here
          + "</textarea>\n"
          + "<button>save file</button>"
          + "<script type='text/javascript'>"
          + "var saveFile = document.getElementsByTagName('button')[0];"
          + "var input = document.getElementsByTagName('textarea')[0];"
          + "var a = document.createElement('a');"
          + "saveFile.onclick = function(e) {"
          + "var clone = '<!doctype html>'+ document.documentElement.outerHTML.replace(/<textarea>.*<.+textarea>/, '<textarea>'+document.getElementsByTagName('textarea')[0].value+'<\/textarea>');"
          + "console.log(clone);"
          + "var file = new Blob([clone], {'type':'text/html'});"
          + "a.href = URL.createObjectURL(file);"
          + "a.download = 'file-' + new Date().getTime() + '.html';"
          + "a.click();"
          + "};"
          + "</scr"+"ipt>"
          + "</body>"
          + "</html>"];

Answer 2:

我不知道是什么打破了第三代克隆，使其结果在js信息输出到页面，但它可能会更好地使用一个实际的文档对象克隆/操纵原始和输出其内容字符串中Blob对象。例如，我测试用你的基地saveFile.html有以下变化：

//remove original clone var and replace with:
var clone = document.cloneNode(true);

// grab textarea elements from both original document and clone:
var doc_input = document.getElementsByTagName("textarea")[0];
var clone_input = clone.getElementsByTagName("textarea")[0];

// set clone textarea's innerHTML to current textarea value:
clone_input.innerHTML = doc_input.value;

// use outerHTML of clone.documentElement to get string for Blob
var clone_string = [clone.documentElement.outerHTML];
var file = new Blob([clone_string], {"type":"text/html"});

我看到的唯一的缺点是：

这可能是很难扩展到生成加载HTML网页的当前状态的“活的HTML文件”（尽管它不应该是比你的实例方法更复杂）更通用的框架。
通过返回的字符串clone.documentElement.outerHTML出现在文档类型声明下降到一个简单的元素，因此：

是不是在输出字符串。你也许可以使用这样的：

var clone_string = ["<!doctype html>" + clone.documentElement.outerHTML];

作为一种变通方法。或者，一些更强大的：

var doc_doctype = new XMLSerializer().serializeToString(document.doctype);

var clone_string = [doc_doctype + clone.documentElement.outerHTML];

文章来源: Edit, save, self-modifying HTML document; format generated HTML, JavaScript