Edit, Save, Self-Modifying HTML Document; Format Generated Html, JavaScript

Edit, save, self-modifying HTML document; format generated HTML, JavaScript

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

Edit and save a file locally with JS

var input = document.querySelector("input[type=file]");var text = document.querySelector("textarea");var button = document.querySelector("input[type=button]");var name;
input.onchange = function(e) {  var reader = new FileReader();  reader.onload = function(event) {    text.value = event.target.result;    button.disabled = false;  }  name = e.target.files[0].name;  reader.readAsText(new Blob([e.target.files[0]], {    "type": "application/json"  }));}
button.onclick = function(e) {  e.preventDefault();  var blob = new Blob([text.value], {    "type": "application/json"  });  var a = document.createElement("a");  a.download = name;  a.href = URL.createObjectURL(blob);  document.body.appendChild(a);  a.click();  text.value = "";  input.value = "";  button.disabled = true;  document.body.removeChild(a);}

textarea {  white-space: pre;  width: 400px;  height: 300px;}

<form>  <input type="file" />  <br />  <textarea></textarea>  <br />  <input type="button" disabled="true" value="Save" /></form>

How to write to local JSON file using jQuery

If you are going with browser then it will not work in any way. If you are using nodejs on local system then you can do it with nodejs. With only remote side script it is not possible. With javascript running in browser you can only perform browser based task.

Save a page after editing it with Javascript?

Instead of setting contentEditable on the entire body, just put it on the element you want to edit. Then, send the contents of that element to the server. When you want to get the data back again, you just include that section in the appropriate place.

Edit, Save, Self-Modifying HTML Document; Format Generated Html, JavaScript