I have a webpage that displays last 1000 lines of a logfile then updates via AJAX every x seconds loading new content (if any) and appending to textarea with $('#log').append(new_data), a sort of tail -f.

The problems e up after some time when too many lines are appended and the page bees slow or unresponsive.

So I'd like to limit number of lines to, say, 5000 so it means I should:

• retrieve new_data
• calculate overflow = 5000 - lines_ in_new_data - lines_in_textarea
• if overflow > 0 remove first overflow lines from textarea
• append new_data to textarea

In my mind this involves one or more split('\n') of both textarea and new_data values then use array lengths and slicing but I guess if there's a neater or better way to acplish this.

I have a webpage that displays last 1000 lines of a logfile then updates via AJAX every x seconds loading new content (if any) and appending to textarea with $('#log').append(new_data), a sort of tail -f.

The problems e up after some time when too many lines are appended and the page bees slow or unresponsive.

So I'd like to limit number of lines to, say, 5000 so it means I should:

• retrieve new_data
• calculate overflow = 5000 - lines_ in_new_data - lines_in_textarea
• if overflow > 0 remove first overflow lines from textarea
• append new_data to textarea

In my mind this involves one or more split('\n') of both textarea and new_data values then use array lengths and slicing but I guess if there's a neater or better way to acplish this.

• javascript
• jquery
• textarea

• 3 Textareas don't actually display '\n' as a line break, though. Is the textarea resizable? It will be much simpler if you limit to a number of characters rather than a number of lines. – Matt Ball Commented May 9, 2011 at 13:48
• upvote for using character length rather than number of lines. – Steve Kelly Commented May 9, 2011 at 13:58
• I understand it would be much simpler but I'd like to get the page working, as much as possible, in a linuxish line-based way. It's a log after all... Even if with some workaround this could be easily avoided it would be really ugly having first line of textarea truncated... – neurino Commented May 9, 2011 at 14:10
• @Matt: no, it's not resizable, just a plain textarea 80cols x 24rows – neurino Commented May 9, 2011 at 14:23
• If the textarea is limited to 80 columns, what happens when a log line contains more than 80 characters? Does it wrap to the next line, or overflow the width? When you want to remove extra lines, do you want to count the extra characters as part of a single line? BTW, some browsers will allow any textarea to be resized with a handle unless you explicitly disable it. – Matt Ball Commented May 9, 2011 at 14:30

2 Answers 2

You should be able to use a single split and then join after truncating the data, something like this:

// on data retrieved
var total = ((textarea.value 
              ? textarea.value + "\n" 
              : "") 
          + new_data).split("\n");

if (total.length > 10) 
    total = total.slice(total.length - 10);

textarea.value = total.join("\n");

Working example: http://jsfiddle/ArvQ7/ (cut to 10 lines for brevity)

Something like this (demo linked below is probably more useful):

HTML

<button id="clickme">More lines</button>
<br/>
<textarea id="log" rows="24" cols="80"></textarea>
<p>Lines: <span id="numLines">0</span></p>

JavaScript

var $log = $('#log'),
    $button = $('#clickme'),
    $numLines = $('#numLines'),
    MAX_LINES = 5000,
    lorem_ipsum = ' Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    lineCounter = 0;

$button.click(function()
{
    $log.val($log.val() + generateMoreLines()).change();
});

$log.change(function ()
{
    var text = tail(MAX_LINES, $log.val());
    $log.val(text);
    $numLines.text(countNewlines(text));
});

function generateMoreLines()
{
    var buf = [];
    for (var i = 0; i < 1000; i++)
    {
        buf.push(lineCounter++ + lorem_ipsum);
    }
    return buf.join('\n');
}

function countNewlines(haystack)
{
    return count('\n', haystack);
}

function count(needle, haystack)
{
    var num = 0,
        len = haystack.length;
    for (var i=0; i < len; i++)
    {
        if (haystack.charAt(i) === needle)
        {
             num++;
        }
    }
    return num;
}

function tail(limit, haystack)
{
    var lines = countNewlines(haystack) + 1;
    if (lines > limit)
    {
        return haystack
            .split('\n')
            .slice(-limit)
            .join('\n');
    }
    return haystack;
}

The newline handling isn't perfect (do you count all occurrences of '\n'? What if the string starts or ends with '\n'? etc.).

Demo: http://jsfiddle/mattball/3ghjm/