How to maintain indentation and line breaks when saving a text file via javascript

Question

I was able to find a script that saves a text file (client-side). access link: http://thiscouldbebetter.neocities.org/texteditor.html

Doubt: let’s say I "printe" this in the text box and have it saved, how to save the exactly idented file like this:

would like to print in the archive like this, with the lines "skipped"

    <p class="algo">algumacoisa
    <span class="label" id="label1"><img src="img/img1.png" /></span>
    <span class="sucesso" id="sucesso1"><img src="img/img2.png" /></span></p>
    <textarea  name="justresp1" ></textarea>

when the file is generated, it ends up being saved in a single line

    <p class="algo">algumacoisa <span class="label" id="label1"><img src="img/img1.png" /></span>   <span class="sucesso" id="sucesso1"><img src="img/img2.png" /></span></p>       <textarea  name="justresp1" ></textarea>

you have any tips?

Answer 1

The line breaks are in the generated file, but that doesn’t mean that the program you use to read the file understands what is there.

A file can be saved with three types of control characters representing the ending of a line in a text document:

• CR

  Common in Mac operating systems, comes from Carriage Return.
  Encoding: 0x0D (13 decimal)

• LF

  Common in Unix operating systems, comes from Line Feed.
  Encoding: 0x0A (10 decimal)

• CR/LF

  Common in Windows operating systems.

Any of the above line terminators is perfectly valid, but not all programs understand them, resulting in the contents of the file appearing on a single line.

Solution

The solution is to make use of the line terminator that suits us, where for this purpose, after reading the text to be saved, we manipulate it to standardize the results.

Since browsers use different line terminators from each other: \r or \n or \r\n respectively, the most certain seems to be the appropriate line terminator usage for the user’s operating system.

So, there’s an example below for testing and performing a simple test of typing two or more lines of text and clicking a button.

What’s going to happen is:

• Read the value of textarea;
• Separate text for an array where each input is a line read, using a regular expression that looks for the 3 possible line terminators;

• Merge text with the appropriate line terminator for the detected operating system:

  We make use of the information provided by the property navigator.appVersion and we try to locate an operating system indicator to return the corresponding line terminator:

  function qualOS() {
    var x = "\r\n";
    if (navigator.appVersion.indexOf("Win") != -1) x = '\r\n';
    if (navigator.appVersion.indexOf("Mac") != -1) x = '\r';
    if (navigator.appVersion.indexOf("X11") != -1) x = '\n';
    if (navigator.appVersion.indexOf("Linux") != -1) x = '\n';
    return x;
  }
  

• Fire an alert to see the text.

Example

function qualOS() {
  var x = "\r\n";
  if (navigator.appVersion.indexOf("Win") != -1) x = '\r\n';
  if (navigator.appVersion.indexOf("Mac") != -1) x = '\r';
  if (navigator.appVersion.indexOf("X11") != -1) x = '\n';
  if (navigator.appVersion.indexOf("Linux") != -1) x = '\n';
  return x;
}

function testar() {

  var texto = document.getElementById("texto").value;

  var linhas = texto.split(/\r\n|\r|\n/g);

  var textoFinal = linhas.join(qualOS());

  alert(textoFinal);
}

textarea {
  width: 400px;
  height: 200px;
}

<textarea id="texto"></textarea>
<p>
  <button onclick="testar()">testar</button>
</p>

This code, in your case, will be to be applied between reading the value of the textarea and the generation of the blob:

function saveTextAsFile() {

  var textToWrite = document.getElementById("inputTextToSave").value;

  // aqui, fazer aqui a verificação e conversão do terminado de linha

  var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});

  // ...
}

Answer 2

According to a comment by the author himself of the script you linked:

Translation:

Line breaks are still there but are formatted in style Unix, not Windows style. Unix uses only the character linefeed for encoding line breaks, which normally appears as \n. Windows, on the other hand, Carriage Return and linefeed for encoding line breaks, which are represented as \r\n. So to save in Windows style, you will probably need of something like:

textToWrite = textToWrite.replace(“\n”, “\r\n”);

Alternatively, you can open the files saved in a program who understands the Unix style, like Notepad++.

Original:

The line breaks are still there, but they’re Unix-Formatted rather than Windows-Formatted. Unix uses just the "linefeed" control Character to Encode line breaks, which is commonly encoded as \n. Windows, on the other hand, uses a Carriage Return AND a line feed to Ncode line breaks, which is represented like this: \r\n. So in order to save the file with Windows-style line breaks, you’ll need to add Something like:

textToWrite = textToWrite.replace(“\n”, “\r\n”);

Alternately, you could open the saved text file with a program that Understands Linux-style line breaks, like Notepad++.