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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -