Самый лучший (и быстрый) способ удалить верхние строки из текстовой области

javascript jquery textarea

4130 просмотра

2 ответа

7367 Репутация автора

У меня есть веб-страница, которая отображает последние 1000строки файла журнала, а затем обновляется через AJAX каждую xсекунду, загружая новый контент (если есть) и добавляя в текстовое поле с $('#log').append(new_data)помощью своего рода tail -f.

Проблемы возникают через некоторое время, когда добавляется слишком много строк, и страница становится медленной или перестает отвечать.

Так что я хотел бы ограничить число строк, скажем, до 5000, так что это означает, что я должен:

  • извлекать new_data
  • высчитывает overflow = 5000 - lines_ in_new_data - lines_in_textarea
  • если overflow > 0удалить первые overflowстроки из текстовой области
  • добавить new_data к textarea

На мой взгляд, это включает в себя одно или несколько split('\n')значений обоих, textareaа new_dataзатем значения длины массива и нарезки, но я думаю, есть ли более точный или лучший способ сделать это.

Автор: neurino Источник Размещён: 09.05.2011 01:42

Ответы (2)


8 плюса

279809 Репутация автора

Решение

Вы должны иметь возможность использовать один, splitа затем joinпосле усечения данных, что-то вроде этого:

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

Рабочий пример: http://jsfiddle.net/ArvQ7/ (для краткости сократить до 10 строк)

Автор: Andy E Размещён: 09.05.2011 03:47

3 плюса

293895 Репутация автора

Примерно так (демо-ссылка ниже, вероятно, более полезна):

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

Обработка новой строки не идеальна (считаете ли вы все вхождения '\n'? Что, если строка начинается или заканчивается '\n'? И т. Д.).

Демо: http://jsfiddle.net/mattball/3ghjm/

Автор: Matt Ball Размещён: 09.05.2011 04:07
Вопросы из категории :
32x32