JQuery load and parse file

Question

Is it the best way (in term of performance) to load and parse a log file - to color (in HTML) all instances of "error"?

<div class="mydiv"></div>

 $.get(path, function(data) {

    var lines = $(data.toString().split(/\n/));

    for (var i = 0, len = lines.length; i < len; i++) {

        if (lines[i].indexOf("error") >= 0){  

            lines[i]=lines[i].replace("error", "<span     class='error'>error</span>");                             
                     $(".mydiv").append(lines[i]);                                  

            }
 })

.error {    
    background-color:red ;      
}

score 0 · Answer 1 · edited May 23 '17 at 11:56

Check out How to replace all dots in a string using JavaScript where a replaceAll method is created for strings. It seems to have great performance "Faster than using regex" and ive used it and it works quite well. You could also remove the toLowerCase within the function and increase performance if case isn't an issue.

From Fagner Brack on How to replace all dots in a string using JavaScript

/**
 * ReplaceAll by Fagner Brack (MIT Licensed)
 * Replaces all occurrences of a substring in a string
 */
String.prototype.replaceAll = function( token, newToken, ignoreCase ) {
    var _token;
    var str = this + "";
    var i = -1;

    if ( typeof token === "string" ) {

        if ( ignoreCase ) {

            _token = token.toLowerCase();

            while( (
                i = str.toLowerCase().indexOf(
                    token, i >= 0 ? i + newToken.length : 0
                ) ) !== -1
            ) {
                str = str.substring( 0, i ) +
                    newToken +
                    str.substring( i + token.length );
            }

        } else {
            return this.split( token ).join( newToken );
        }

    }
return str;
};

alert('okay.this.is.a.string'.replaceAll('.', ' '));

so for your code i would use something like this

$.get(path, function(data) {
    var strData = data.toString();
    strData.replaceAll("error", "<span class='error'>error</span>");    
    $(".mydiv").append($(strData));
 })

Edit:

As suggested by Sergey Kochetov the .replace is significantly faster. So this would be a faster method.

$.get(path, function(data) {
    var strData = data.toString();
    strData.replace(/error/gi, "<span class='error'>error</span>");  
    $(".mydiv").append($(strData));
 })

Split/join works much slower than replace. See: http://jsperf.com/split-join-vs-replace/2 — Sergey Kochetov, Aug 15 '13 at 08:55
Thanks I will try to use this function. @Sergey K:You think if I replace: return this.split( token ).join( newToken ); by return this.replace(token,newToken ); Will be better? — Jils, Aug 15 '13 at 09:46
Actually yes. As you see from charts all modern browsers will perform much faster with replace rather than split/join. And I would not recommend extending native javascript objects (i.e. String). Also no need to wrap string in $ function before appending it. So in your case I'd go with var strData = data.toString(); strData = strData.replace(/error/gi, "error"); $(".mydiv").append(strData); — Sergey Kochetov, Aug 15 '13 at 13:22
@SergeyKochetov even tho the replaceAll method actually uses substrings replace is indeed faster. Test cases - http://jsperf.com/split-join-vs-replace/9 — ug_, Aug 15 '13 at 18:17
I tryed this code, but I had an error on the line: $(".mydiv").append($(strData)). "Uncaught Error: Syntax error, unrecognized expression:..." — Jils, Aug 22 '13 at 13:37

score 0 · Answer 2 · answered Aug 15 '13 at 08:43

0

It's way better to append all of you lines at once:

for (...){
...
}
$(".mydiv").append(lines.join(''));

answered Aug 15 '13 at 08:43

Sergey Kochetov

390
1
7

JQuery load and parse file

2 Answers2