Открыть файл в js, найти строку и дополнить ее. Записать файл

Question

в теле пишу функцию.

  onload = function () {
    // вешаем обработчик события, срабатывающий при изменении input'а
    document.querySelector('fileInput').addEventListener('change', onFilesSelect, false);
  }

имя inputa записал какое имя записано в id в html.

в коде присутствует функция которая должна запускаться при выборе файла. вот она.

function onFilesSelect(e) {
  // получаем объект FileList
  var files = e.target.files,
    // div, куда помещается таблица с информацией о файлах
    output = document.getElementById('output'),
    // таблица с информацией
    table = document.createElement('table'),
    // её тело
    tbody = document.createElement('tbody'),
    // строка с информацией о файле (Перезаписывается каждый шаг цикла)
    row,
    // FileReader (Создаётся для каждого файла)
    fr,
    // объект file из FileList'a
    file,
    // массив с информацией о файле
    data;
// Чистим контейнер с таблицей
  output.innerHTML = '';
// Вставляем в таблицу её тело
  table.appendChild(tbody);
  // Определяем заголовок таблицы (Названия колонок)
  tbody.innerHTML = 
  "<tr><td>Имя</td><td>MIME тип</td><td>Размер (байт)</td><td>Превью</td></tr>";
// Перебираем все файлы в FileList'е
  for(var i = 0; i < files.length; i++) {

    file = files[i];
    // Если в файле содержится изображение
    if(/text.*/.test(file.type)) {
      // узнаём информацию о нём
      data = [file.name, file.type, file.size];
      fr = new FileReader();
      // считываем его в строку base64
      fr.readAsDataURL(file);
      // как только файл загружен
      fr.onload = (function (file, data) {
alert("Loaded");
      }) (file, data);
    // Если файл не изображение
    } else {
      // то вместо превью выводим соответствующую надпись
      data = [file.name, file.type, file.size, 'Файл не является изображением'];
      appendFileInfo(tbody, data);
    }

  }
  // помещаем таблицу с информацией о файле в div
  output.appendChild(table);

}

Это из примера с загрузкой изображения.Пытался переделать на текст. Тишина. Что не так, и может можно сделать проще? В итоге мне нужно получить строку, найти нужную последовательность символов, вставить текст и сохранить файл. Все это происходит при работе с браузером, но только локально, скорее всего только на Хром'е это нужно будет совершить.

в js файле моего расширения используется код jquery. мне кажется этот код

function onFilesSelect(e) {
 alert("Loaded");
 }

не может выполнится в нутри его(jquery) функций. Как правильно его разместить вне функций jquery?

сам инпут в html

  <br>
  </br>
<input id="fileInput" type="file" size="50" onchange="onFilesSelect(event)">
<div id="fileOutput"></div>
 <br>
  </br>

Answer 1

Можно воспользоваться методом .readAsText(...). В результате в функции onload можно будет получить текст загруженного файла.

С сохранением все печальнее. Раньше была речь про FileSaver interface и метод saveAs объекта window, но, похоже, что-то не задалось, и теперь про него нет упоминаний.

Но, можно создать элемент A, установить свойству href - objectURL для созданного Blob, в котором хранится измененный текст, добавить ему значение в свойство download и программно вызвать click.

В этом случае, сохранится файл с именем указанным в свойстве download. В зависимости от настроек браузера может показаться окошко с выбором места для сохранения, либо сохранится в папку для загрузок.

Пример:

function saveFile(file, blob) {
  var url = URL.createObjectURL(blob);
var a = document.createElement('a');
  a.download = file.name;
  a.href = url;
  a.click();
// очищаем object URL
  setTimeout(function() {
    URL.revokeObjectURL(url);
  }, 2000);
}
function onFilesSelect(e) {
  // получаем объект FileList
  var files = e.target.files;
// Перебираем все файлы в FileList'е
  for (var i = 0; i < files.length; i++) {
    let file = files[i];
    var fileReader = new FileReader();
    fileReader.onload = function(e) {
      // сохраняем текст файла в переменную
      var textContent = e.target.result;
  // выводим на странице
  document.getElementById('data').innerHTML = textContent;

  // меняем что-то в строке
  var replaced = textContent.replace(/\w/g, '1$&amp;1');

  // формируем blob
  var blob = new Blob([replaced]);

  // пытаемся сохранить
  if (!window.saveAs) {
    saveFile(file, blob);
  } else {
    window.saveAs(blob, file.name);
  }

}

// читаем файл как текст
fileReader.readAsText(file);

}
}

<input type="file" onchange="onFilesSelect(event)" />
<pre id="data"></pre>