Javascript: добавление стилей в файл построчно

Question

У меня есть обычный текстовый файл, который подается онлайн с помощью веб-сервера.Это журнал в следующем формате:

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

Я хочу сделать некоторый javascript для построчного форматирования журналов и применения различных стилей к отметке времени, имени пользователя и сообщению.Как читать текст построчно и применять стили CSS?

Answer 1

Пример

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>');

Я бы использовал jQuery для ajax только потому, что это так просто реализовать:

$.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>');
    }
})

Answer 2

Вы можете использовать регулярное выражение для генерации одной строки HTML:

var t = ' [00:24:48] username message text goes here ';
var r = /(\[)([^\]]+)(\] +)(\S+)/g;
var html = t.replace(r, '<span class="timestamp">$2<\/span>' +
                        '<span class="username">$4<\/span> <span class="message">') +
                        '<\/span><br>';

//  <span class="timestamp">00:24:48</span><span class="username">username</span>'
//  <span class="message"> message text goes here </span><br>

хотя вам может понадобиться использовать многострочный флаг (m), в зависимости от ввода.