Edit, save, self-modifying HTML document; format generated HTML, JavaScript -
motivation: https://stackoverflow.com/questions/28120689/create-self-modifying-html-page-on-box
bug: string escaping , formatting html
, js
generated initial edited , saved html
, js
e.g.,
a) if open "savefile.html" @ local browser ;
b) type "abc" textarea
;
c) click save file
button ;
d) click save
@ save file
dialog ;
e) file-*[date according universal time].html
saved disk ;
f) open file-*[date according universal time].html
in browser ;
g) type "def" textarea
;
h) repeat d) , e) , f) ;
i) bug: result @ second file-*[date according universal time].html
display textarea
containing "abc def" text content ; button
not displayed @ html
:
// @ rendered `html` second `file-*[date according 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 @ 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 = 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 = 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 /textarea>
in clone
variable. doesn't first file because there's newline character after textarea in html. 1 way fix add newline
character in generated html. 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 = 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>"];
Comments
Post a Comment