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

#javascript #html #парсер

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



  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 = 
  "ИмяMIME типРазмер (байт)Превью";
 
  // Перебираем все файлы в 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



  

  



 

  




    

Ответы

Ответ 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$&1');

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

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

    }

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