Javascript：逐行向文件添加样式答案

【问题标题】：Javascript: adding styles to file line by lineJavascript：逐行向文件添加样式
【发布时间】：2011-11-08 01:55:31
【问题描述】：

我有一个使用网络服务器在线提供的纯文本文件。它是一个日志，格式如下：

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

我想制作一些 javascript 来逐行格式化日志，并对时间戳、用户名和消息应用不同的样式。如何逐行阅读文本并应用css样式？

【问题讨论】：

你为什么不使用网络服务器将其格式化为 HTML 并提供它？每次在客户端使用脚本对其进行格式化并不是非常有效地使用资源。
我希望将此功能添加为浏览器扩展或用户脚本

标签： javascript html css styles

【解决方案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>');
    }
})

【讨论】：

IAbstractDownvoteFactory，如何将每一行读入行变量？

【解决方案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)，具体取决于输入。

【讨论】：