我有一个使用网络服务器在线提供的纯文本文件。它是一个格式如下的日志:
[00:24:48] <username> message text goes here
我想制作一些 JavaScript 来逐行格式化日志,并对时间戳、用户名和消息应用不同的样式。如何逐行读取文本并应用 css 样式?
最佳答案
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"><$1></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"><$1></span>');
$('#id').html('<div class="message">' + line + '</div>');
}
})
关于Javascript:逐行向文件添加样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7265279/