How to read file content in a javascript variable?

Question

I got a small script to split the text inside 'var foo' after every 4 characters. It is working fine. but my actual data is in a text file say 'a.txt'. How do I take this entire file text in 'var foo'. and write the split output to another text file?

var foo = "this is sample text !!!"; 
var arr = [];
for (var i = 0; i < foo.length; i++) {
    if (i % 4 == 0 && i != 0)
        arr.push(foo.substring(i - 4, i));
    if (i == foo.length - 1)
        arr.push(foo.substring(i - (i % 4), i+1));          
}
document.write(arr);
console.log(arr);

possible duplicate of [How to read and write into file using JavaScript](http://stackoverflow.com/questions/585234/how-to-read-and-write-into-file-using-javascript) — Chase, Apr 25 '13 at 12:22
I can't see any significant relation among question title, description, and the provided code. Please try to explain the context of your question like where are you trying to execute this code, in a browser, a native app developed in JS or a server. — saurav, Oct 14 '16 at 16:50

score 9 · Answer 1 · answered Apr 14 '17 at 01:44

To get the content of the file you need to select a file using an input tag.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input id="input" type="file" accept="text/plain">
  <script src="script.js"></script>
</body>

A good moment to read the content of the file is in the change event.

const input = document.querySelector("#input");

input.addEventListener("change", () => {
  const file = input.files.item(0);
});

To read the content of the file as a string you need to convert it.

function fileToText(file, callback) {
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = () => {
    callback(reader.result);
  };
}

The content of the file as a string will be available to the the callback function. You can create a link and use the click event to download the string into a text file.

function save(content, fileName, mime) {
  const blob = new Blob([content], {
    tipe: mime
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = fileName;
  a.click();
}

Here is the complete code

const input = document.querySelector("#input");

input.addEventListener("change", () => {
  const file = input.files.item(0);
  fileToText(file, (text) => {
    save(text, "fileName.txt", "text/plain");
  });
});

function fileToText(file, callback) {
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = () => {
    callback(reader.result);
  };
}

function save(content, fileName, mime) {
  const blob = new Blob([content], {
    tipe: mime
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = fileName;
  a.click();
}

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <input id="input" type="file" accept="text/plain">
  <script src="script.js"></script>
</body>

You can read more about manipulating files in JavaScript here: https://www.html5rocks.com/en/tutorials/file/dndfiles/

score 2 · Answer 2 · answered Sep 08 '20 at 08:39

Solution to this helped me :

How do I load the contents of a text file into a javascript variable?

var client = new XMLHttpRequest();
client.open('GET', '/foo.txt');
client.onreadystatechange = function() {
alert(client.responseText);
}
client.send();

How to read file content in a javascript variable?

2 Answers2

Linked