javascript - 我可以用 HTML5 + 其他网络技术实现这一点吗？

Question

差不多6个月前，我在stackoverflow上问了一个问题“Software to help in log analysis?”

请在继续阅读之前先查看该问题。

事实证明，目前还没有好的软件可以根据时间戳混合日志文件并在良好的 UI 中呈现它们。

我想主动开发一些东西，并在完成后将其开源。

早些时候，我通过用 C++ 编写了一段快速而肮脏的代码来解决这个问题，这将生成一个制表符分隔的文件(类似于 csv，但制表符分隔)，稍后我将在 Excel 中打开该文件。

我对我的 C++ 代码不满意，原因如下: 1. 后面查看输出文件完全依赖Excel。 2. 由于没有涉及UI，所以每次都编写其命令行并不容易。 3. 由于命令行的学习曲线，它不太适合与其他团队成员(以及全世界)共享。

出于上述原因(以及其他一些原因)，我正在考虑将其开发为网络解决方案。这样我就可以与大家分享工作实例。

我想到的是一个基于网络的解决方案，如下所示:

• 用户将能够使用 HTML5 的文件 API 提供输入日志文件。
• 然后用户可能会告诉与每个日志文件关联的时间戳的格式。
• 此后，JavaScript 会将这些日志文件处理为表格中的混合 HTML 输出。

我只是网络技术的初学者。所以我需要你的帮助来确定这是否是最好的方法？

我想要一个网络解决方案，但这并不意味着我希望用户上传他的日志文件以进行后端处理。我想要一个基于网络的仅限客户端的解决方案。

感谢您的投入。

编辑:基于 Raynos 下面的评论

@bits You do realise that browsers were not meant to handle large pieces of data. There was stackoverflow.com/questions/4833480/… which shows that this can cause problems.

我觉得在浏览器中执行此操作并不是最好的选择。也许，我应该探索基于后端的解决方案。 有什么想法或建议吗？

Answer 1

您正在寻找一个在线比较工具，它需要 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);
        }());
    }
});

观看直播example .

因此，您拥有了解析器所需的所有文本。我希望这能有所帮助。

至于差异的标记，我建议如下:

<table>
 <!-- one tr per unique timestamp -->
 <tr>
  <!-- one td/textarea per file -->
  <td> <textarea /> </td>
  <td> <textarea /> </td>
 </tr>
 ...
</table>

我建议将其作为模板并使用模板引擎来完成一些繁重的工作。

假设我们想使用 jquery-tmpl .

这是一个让您了解 started 的示例。 (我花了零时间让它看起来不错。那是你的工作)。

剩下的就是生成 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.
}

根据example .

这些是基本构建 block 。从文件 API 获取数据。将数据处理为规范化的数据格式，然后在数据格式上使用某种渲染工具。