Question

I have a plaintext file that is served online using a webserver. It is a log with the following format:

[00:24:48] <username> message text goes here

I want to make some javascript to format the logs line by line and apply different styles to the timestamp, username and message. How do I read the text in line by line and apply css styles?

Answer 1

Example

var line = "[00:24:48] <username> message text goes here";
// stamp
line =  line.replace(/(\[[0-9]{2}:[0-9]{2}:[0-9]{2}\])/, '<span class="stamp">$1</span>');
// username
line =  line.replace(/<([a-zA-Z]+)>/, '<span class="user">&lt;$1&gt;</span>');

$('#id').html('<div class="message">' + line + '</div>');

I would use jQuery for the ajax just because it’s so simple to implement:

$.ajax({
    type: 'GET',
    url: '/log.txt',
    success: function(lines) {
        processLines(lines.split('\n'));
    }
})

function processLines(arrayOfLines) {
    for (var i = 0; i < arrayOfLines.length; i++) {
        var line = arrayOfLines[i]; //"[00:24:48] <username> message text goes here";
        // stamp
        line = line.replace(/(\[[0-9]{2}:[0-9]{2}:[0-9]{2}\])/, '<span class="stamp">$1</span>');
        line = line.replace(/<([a-zA-Z]+)>/, '<span class="user">&lt;$1&gt;</span>');

        $('#id').html('<div class="message">' + line + '</div>');
    }
})