All geek questions in one place

Edit, save, self-modify HTML-document; formatted HTML, JavaScript

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

Error: erasing lines, formatting html , js generated by the initial edited, saved html , js

eg,

a) if "saveFile.html" is open in the local browser;

b) enter "abc" in textarea ;

c) click save file ;

d) click Save in the save file dialog box;

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

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

g) enter "def" in textarea ;

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

i) Error: the result in the second file-*[date according to universal time].html displays textarea containing the text content "abc def"; button does not appear in 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 on 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>
+2
source share
2 answers

The replace function replaces before /textarea> , which is in your clone variable. It does not do this from the first file, because a newline character appears after the text field in html. One way to fix this is to add the newline character to 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>"];
+1
source

I'm not sure what destroys the third-generation clone, so that it causes the js information to be displayed on the page, but it would probably be better to use the actual document object to clone / control the original and output its contents as a string for the Blob object . For example, I tested using the saveFile.html database with the following changes:

 //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 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"});

The only drawbacks that I see are the following:

  • It can be difficult to expand into a more general structure to create a "live HTML file" of the current state of the loaded HTML page (although this should not be more complicated than your sample approach).

  • The string returned by clone.documentElement.outerHTML apparently discards the document type declaration into a simple element, so that:

not in output line. You could probably use something like:

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

as a workaround. Or, for something more durable:

 var doc_doctype = new XMLSerializer().serializeToString(document.doctype); var clone_string = [doc_doctype + clone.documentElement.outerHTML];
+1
source

Source: https://habr.com/ru/post/1257998/

More articles:


All Articles