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

本文介绍了编辑，保存，自修改HTML文档;格式生成HTML，JavaScript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

动机：

Bug：字符串转义，格式您的替换函数将替换为 / 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！