我可以在 HTML5 中实现这一点吗？其他网络技术？

Question

大约 6 个月前，我在 stackoverflow 上问了一个问题“帮助进行日志分析的软件？< /a>”

在继续阅读之前请先看一下这个问题。

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

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

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

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

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

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

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

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

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

感谢您的投入。

编辑：基于 Raynos 下面的评论

@bits 你确实意识到浏览器 不适合处理大件 的数据。有 stackoverflow.com/questions/4833480/… 这表明这可能会导致 问题。

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

Answer 1

您正在寻找一个在线比较工具，该工具需要 n 个文件，其中包含按某种顺序的时间戳列表，包括要在适当位置显示但不在比较中解析的额外数据。

文件上传将涉及

以及 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.
}

根据示例。

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

Answer 2

使用 javascript 可以很容易地做到这一点。您上面提到使用 html5 文件 api，这是一个很好的起点（html 文件 api ），您可以使用不显眼的 javascript 在上传文件时触发回调。在回调中，您可以使用任何优秀的 javascript 模板库从上传的文件构建元素表。然后，在后续文件上传时，您可以使用它们的时间戳将它们动态地交错到表中。如果您使用编译形式，使用 js 正则表达式检测时间戳将相当简单，并且相当有效。

这是对该问题的相当高水平的回答，如果您对特定细节有任何疑问，我也很乐意回答。

希望这有帮助