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

Question

大约6个月前，我问了一个关于堆栈溢出"帮助日志分析的软件？“的问题。

在阅读之前请先看一下那个问题。

事实证明，目前还没有一个好的软件可以混合基于时间戳的日志文件，并将它们显示在一个好的UI中。

我想采取主动，开发一些东西，并开放源代码，一旦它完成。

在此之前，我使用c++编写了一段快速而肮脏的代码，这将生成一个由选项卡分隔的文件(如csv，但选项卡已分离)，稍后我将在Excel中打开该文件。

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

出于上述原因(还有其他几个原因)，我正在考虑将其开发为一个web解决方案。这样，我就可以与每个人共享工作实例。

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

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

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

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

谢谢你的意见。

编辑:基于Raynos下面评论的

@bits您确实意识到浏览器不是用来处理大数据的。有stackoverflow.com网站/问询/4833480/…这表明这会引起问题。

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

Answer 1

您正在寻找一个在线的diff工具，它接受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);
        }());
    }
});

见live 示例。

所以，您只需要处理解析器就可以得到所有的文本。我希望这能帮点忙。

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

<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获取数据。将数据操作为规范化的数据格式，然后在数据格式上使用某种渲染工具。

Answer 2

使用javascript很容易做到这一点。使用上面提到的html5文件api，这是一个很好的起点(html文件api)，您可以在上传文件时使用不显眼的javascript进行回调。在回调中，您可以使用任何优秀的javascript模板库来从上传的文件中构造一个元素表。然后，在随后的文件上传时，可以使用时间戳动态地将它们插入到表中。使用js正则表达式检测时间戳非常简单，如果使用编译过的表单，则会相当有效。

这是一个相当高层次的答案，如果你有任何关于特定细节的问题，我也很乐意回答。

希望这能有所帮助