jquery - jquery根据文本改变颜色

Question

我有一个看起来像这样加载到页面的日志文件：

23-06-2013, 15:04 - Action no.11
-Ip adress ::1
23-06-2013, 15:04 - Error no.21
-Ip adress ::1

我想用jquery改变那些Action no.11和Error no.21的颜色（希望有可能）。动作应该是一种颜色（例如绿色），错误应该是另一种颜色（例如红色）。它是从 .log 文件加载的，因此没有 .log 之类的标签。所以我认为，它应该检查单词“Action”或“error”并改变颜色。谢谢你的建议

Answer 1

• 将您的日志插入到.log，例如<pre>（如果禁用 JS 会更好）：

HTML：

<pre class="log">23-06-2013, 15:04 - Action no.11
-Ip adress ::1
23-06-2013, 15:04 - Error no.21
-Ip adress ::1</pre>

• 将行拆分为数组
• 清除.log
• 循环线
• 将文本换行到 jQuery 对象
• 附加到.log
• 检查行是否包含Action或Error
• 换颜色

jQuery :

var lines = $('.log').text().split('\n');
$('.log').empty();

$.each(lines, function() {
    var $this = $('<div>'+this+'</div>');

    $('.log').append($this);
    if( $this.text().match('Action') ) {
        $this.css('color', 'green');
    }
    else if( $this.text().match('Error') ) {
        $this.css('color', 'red');
    }
});

jsFiddle

Answer 2

这有点像语法高亮

function makeSpan(match){
    var color; 
    if(match.match('Error')){
    color = "red";
       }
       else{
       color = "green";
       }
    return "<span style='color:"+color+"'>"+ match  +"</span>";
}

var body = $('body');
var newBody = body.html().replace(/(Action.+)|(Error.+)/g,makeSpan);
body.html(newBody);

看看这个 jsFiddle