Вы ищете онлайн-инструмент сравнения, который принимает n файлов, содержащих список временных меток в некотором порядке, включая дополнительные данные, которые должны отображаться на месте, но не анализироваться при дифференцировании.
Загрузка файла будет включать
<input id="upload" type="file">
Вместе с фрагментами javascript
$("#upload").change(function(files) {
var files = this.files;
for (var i = 0; i < files.length; i++) {
(function() {
var file = files[i];
var reader = new FileReader;
reader.onload = function(e) {
var text = reader.result;
console.log(text);
};
reader.readAsText(file);
}());
}
});
Смотрите в прямом эфире пример .
Итак, у вас есть весь текствам просто нужно поработать над парсером.Я надеюсь, что это немного помогает.
Что касается разметки различий, я бы предложил что-то вроде:
<table>
<!-- one tr per unique timestamp -->
<tr>
<!-- one td/textarea per file -->
<td> <textarea /> </td>
<td> <textarea /> </td>
</tr>
...
</table>
Я бы порекомендовал сделать этот шаблон и использовать движок шаблонов для выполнения некоторых тяжелых работ.
Допустим, мы хотим использовать jquery-tmpl .
Вот пример, чтобы вы начали .(Я трачу ноль времени на то, чтобы он выглядел хорошо. Это ваша работа).
Все, что осталось, - это генерировать данные JSON для вставки в шаблон.
Таким образом, при вводе вашего файла у вас должен быть массив fileTexts где-нибудь.
Мы хотим иметь какой-то разделитель, чтобы разделить его на отдельные записи отметок времени.Для простоты скажем, что символ новой строки будет работать.
var fileTexts = [file];
var regex = new RegExp("(timestampformat)(.*)");
for (var i = 0; i < fileTexts.length; i++) {
var text = fileTexts[i];
var records = text.split("\n");
for (var j = 0; j < records.length; j++) {
var match = regex.exec(records[j]);
addToTimestamps(match[1], match[2], i);
}
}
function addToTimestamps(timestamp, text, currFileCount) {
console.log(arguments);
// implement it.
}
Согласно примеру .
Это основные строительные блоки.Получите данные из File API.Манипулируйте данными в нормализованном формате данных, затем используйте какой-либо инструмент рендеринга для формата данных.