从文本区域删除顶行的最整洁(和快速）方法

Neatest (and fast) way to remove top lines from a textarea

本文关键字：方法 区域 文本 删除      更新时间：2023-09-26

我有一个网页，显示日志文件的最后1000行，然后每x秒通过AJAX更新一次，加载新内容（如果有的话）并附加到文本区域，$('#log').append(new_data)，这是一种tail -f。

一段时间后，当附加的行太多并且页面变慢或无响应时，问题就会出现。

所以我想将行数限制为 5000 行，这意味着我应该：

  • 检索new_data
  • 计算overflow = 5000 - lines_ in_new_data - lines_in_textarea
  • 如果overflow > 0从文本区域中删除前 overflow 行
  • 将new_data追加到文本区域

在我看来，这涉及textarea值和new_data值的一个或多个split(''n')，然后使用数组长度和切片，但我想是否有更整洁或更好的方法来实现这一目标。

您应该能够使用单个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 行）

像这样的东西（下面链接的演示可能更有用）：

.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/

相关文章：