jQuery根据文本更改颜色

Question

i have a log file which look like this loaded to page:

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

and i wanna change color of those Action no.11 and Error no.21 with jquery (hope it is possible). Action should be one color (eg green) and Error should be other one (eg Red). It is loaded from .log file so it has no tags like . So i think, it should check for word "Action" or "error" and change color. thx for advice

Answer 1

• insert your log to .log , for example to <pre> (it will be nicer if JS is disabled):

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>

• split lines to array
• clear .log
• loop lines
• wrap text to jQuery object
• append to .log
• check if line contains Action or Error
• change color

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

This is kinda like syntax highlighting

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

Chek out this jsFIddle