编辑、保存、自修改HTML文档；格式生成的HTML、JavaScript_Javascript_Html_Self Modifying

编辑、保存、自修改HTML文档；格式生成的HTML、JavaScript

javascript html

编辑、保存、自修改HTML文档；格式生成的HTML、JavaScript,javascript,html,self-modifying,Javascript,Html,Self Modifying,动机：错误：字符串转义，格式化html，js由初始编辑生成，保存html，js e、 g a）如果在本地浏览器中打开“saveFile.html” b）在文本区键入“abc” c）点击保存文件按钮 d）单击保存文件对话框中的保存 e）文件-*[日期根据世界时].html保存到磁盘 f）在浏览器中打开文件-*[日期根据世界时间].html g）在文本区域键入“def” h）重复d）、e）、f） i）错误：结果在第二个文件-*[日期根据世界时].html显示包含“abc def”

动机：

错误：字符串转义，格式化

html

，

js

由初始编辑生成，保存

html

，

js

e、 g

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

b）在

文本区键入“abc”

c）点击

保存文件

按钮

d）单击

保存文件

对话框中的

保存

e）

文件-*[日期根据世界时].html

保存到磁盘

f）在浏览器中打开

文件-*[日期根据世界时间].html

g）在

文本区域键入“def”
h） 重复d）、e）、f）
i） 错误：结果在第二个文件-*[日期根据世界时].html
显示包含“abc def”文本内容的textarea
<代码>按钮

不显示在

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=''+document.documentElement.outerHTML.replace（/.*/，''+document.getElementsByTagName（'textarea'）[0]。value+''

“saveFile.html”v1.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>


保存文件
var saveFile=document.getElementsByTagName（“按钮”）[0]；
var input=document.getElementsByTagName（“textarea”）[0]；
var a=document.createElement（“a”）；
saveFile.onclick=函数（e）{
变量克隆=[“”
+输入值
+ ""
+“保存文件”
+ ""
+“var saveFile=document.getElementsByTagName（'button'）[0]；”
+“var input=document.getElementsByTagName（'textarea'）[0]；”
+“var a=document.createElement（'a'）
+“saveFile.onclick=函数（e）{”
+“var clone=''+document.documentElement.outerHTML.replace（/.*/，''+document.getElementsByTagName（'textarea'）[0]。值+”；”
+“console.log（克隆）；”
+var file=newblob（[clone]，{'type'：'text/html'}）
+“a.href=URL.createObjectURL（文件）；”
+“a.download='file-'+new Date（）.getTime（）+'.html'
+“a.单击（）；”
+ "};"
+ ""
+ ""
+ ""];
var file=newblob（[clone]，{“type”：“text/html”}）；
a、 href=URL.createObjectURL（文件）；
a、 download=“file-”+新日期（）.getTime（）+”.html”；
a、 单击（）；
};

替换函数将替换

/textarea>

，直到

克隆

变量中的

/textarea>

。它不会从第一个文件开始这样做，因为html中的textarea后面有一个换行符。解决这个问题的一种方法是在生成的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>"];

var clone=[“”
+输入值
//在此处添加换行符
+“\n”
+“保存文件”
+ ""
+“var saveFile=document.getElementsByTagName（'button'）[0]；”
+“var input=document.getElementsByTagName（'textarea'）[0]；”
+“var a=document.createElement（'a'）
+“saveFile.onclick=函数（e）{”
+“var clone=''+document.documentElement.outerHTML.replace（/.*/，''+document.getElementsByTagName（'textarea'）[0]。值+”；”
+“console.log（克隆）；”
+var file=newblob（[clone]，{'type'：'text/html'}）
+“a.href=URL.createObjectURL（文件）；”
+“a.download='file-'+new Date（）.getTime（）+'.html'
+“a.单击（）；”
+ "};"
+ ""
+ ""
+ ""];
我不确定是什么破坏了第三代克隆，从而导致js信息输出到页面，但最好使用实际的文档对象来克隆/操作原始文档，并将其内容作为Blob
对象的字符串输出。例如，我使用您的base 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];

你能更清楚、简单地解释应该发生的事情和实际发生的事情吗？也许还可以提供一些更好的整体概念上下文？@Anthony预期的结果是在“保存文件”按钮
上单击

后保存文件，打开时，应将文本输入到先前的

html

文档中的

文本区域

元素，包括同级

按钮

元素。上下文试图创建自修改、伪多态的

html

文档，其中在

textarea

中进行的更改保存在一个版本中，在下一个保存的版本中呈现。尝试了

+'\n'）；“

，显示了

按钮

，但显示为在

js

处呈现新行；下一行以

开头）；console.log（克隆）

在源代码处呈现为文本字符串，而不是

js

。请参见编辑，您需要在第一行之后添加\n”“更新。还添加了一个仅使用

serializeToString

而不是

outerHTML

的v2 html。确保您针对任何您希望它使用的浏览器进行测试。

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

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

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