How to create a table from unformatted data within the browser?

Question

I have a log file that is generated and records timestamps of utility access. The log looks similar to this

Fri May 27 12:43:48 PDT 2011      user1 command1 1 2 3
Fri May 27 12:43:50 PDT 2011      user1 command2 abcdef   12  11
Fri May 27 12:44:00 PDT 2011      user1 command3
Fri May 27 12:45:12 PDT 2011      user1 command4

I access this file through my browser to check the activity.

Since the file is a text file, is is not very easy to read.

Is it possible (using Javascript?) to modify the file after loading in the browser, so that timestamp, username and command are displayed in three columns of a table, and the original file is not affected?

If it matters, I am using Chrome 12, so any solution specific to the browser will also work.

Answer 1

You could write a JavaScriptlet (a javascript: URL shortcut in your browser bar) that does something like this:

(function() {
  var lines = document.body.innerHTML.split(/\r?\n/)
    , table = "<table>", line, i;
  for (i=0; i<lines.length; i++) {
    line = lines[i].split(/\s+/);
    table += "<tr>";
    table += "<td>" + line.slice(0, 6).join(' ') + "</td>";
    table += "<td>" + line[6] + "</td>";
    table += "<td>" + line.slice(7).join(' ') + "</td>";
    table += "</tr>";
  }
  table += "</table>";
  document.body.innerHTML = table;
})();

So just compress that all onto a single line and save your shortcut as "javascript:[code here]" and it should work. Theoretically. I haven't tried it.