Javascript：逐行添加樣式到文件

Question

我有一個使用Web服務器在線提供的純文本文件。這是一個日誌格式如下：

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

我想拍一些JavaScript來格式化一行日誌線和應用不同的樣式時間戳，用戶名和消息。如何逐行讀取文本並應用css樣式？

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

我會用jQuery for the 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），具體取決於輸入。