编辑，保存，自修改HTML文档;格式生成HTML，JavaScript [英] Edit, save, self-modifying HTML document; format generated HTML, JavaScript

问题描述

动机： https://stackoverflow.com/questions/28120689/create - 自我修改HTML页面的框

Bug：字符串转义，格式 html ， js 通过初始编辑生成，保存 html ， js textarea 中键入abc;

点击保存文件按钮; d）在保存文件对话框中点击保存;
$ b e）文件 - * [根据世界时间的日期] .html 保存到磁盘; f）在浏览器中打开文件 - * [根据世界时间的日期] .html ;

输入def到 textarea ; b）b）b）b）b）b）重复d），e），f）;

$ b 错误：第二个文件的结果 - * [根据世界时间的日期] .html 显示 textarea 包含abc def文本内容; 按钮 not 显示在 html ：

  //在第二个`file  -  * [日期根据世界时间] .html` 
 //`textarea`包含abc def在这里显示，
 //``按钮`_不显示;在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

<$ p $ < code> +var clone ='<！doctype html>'+ document.documentElement.outerHTML.replace（/< textarea>。*<。+ textarea> /，'< textarea> '+ document.getElementsByTagName（'textarea'）[0] .value +'< \ / textarea>'）;

---

saveFile.htmlv 1.0.0

html，js

 <！doctype html> 
< html> 
<！ -  saveFile.html 1.0.0 2015 guest271314编辑，保存`html`文档 - > 
< head> 
< / head> 
< body> 
< textarea> 
< textarea> 
<按钮>保存文件< /按钮> 
< ; 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> 
 +<按钮>储存档案< /按钮> 
 +< 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> 
  

解决方案您的替换函数将替换为 / textarea> ，它位于 clone 变量中。它不会从第一个文件中执行，因为html中的textarea后面有一个换行符。解决这个问题的一种方法是在生成的html中添加一个 newline 字符。像这样：

  var clone = [<！doctype html>< head>< / head>< body> ;< TextArea>中
 + input.value 
 //在此处添加新行
 +< / textarea> \\\

 +<按钮>保存文件< /按钮> 
 +< 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>]; 
  

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

Bug: String escaping , formatting html , js generated by initial edited , saved html , js

e.g.,

a) if open "saveFile.html" at local browser ;

b) type "abc" into textarea ;

c) click save file button ;

d) click Save at Save File dialog ;

e) file-*[date according to universal time].html saved to disk ;

f) open file-*[date according to universal time].html in browser ;

g) type "def" into textarea ;

h) repeat d) , e) , f) ;

i) Bug: result at second file-*[date according to universal time].html does display textarea containing "abc def" text content ; button not displayed at 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();};

generated at line 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>

解决方案

Your replace function replaces until the /textarea> that is in your clone variable. It doesn't do it from the first file because there's a newline character after textarea in the html. One way to fix it would be to add a newline character in the generated html. Like this:

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>"];

这篇关于编辑，保存，自修改HTML文档;格式生成HTML，JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！