如何解析光标 ANSI 转义码？

Question

我正在编写处理jQuery Terminal光标ANSI转义码的代码，但是遇到了问题，不确定它应该如何工作，我得到了奇怪的结果。

我正在使用ervy库进行测试。

并且使用以下代码：

function scatter_plot() {
     const scatterData = [];

     for (let i = 1; i < 17; i++) {
         i < 6 ? scatterData.push({ key: 'A', value: [i, i], style: ervy.fg('red', '*') })
           : scatterData.push({ key: 'A', value: [i, 6], style: ervy.fg('red', '*') });
     }

     scatterData.push({ key: 'B', value: [2, 6], style: ervy.fg('blue', '# '), side: 2 });
     scatterData.push({ key: 'C', value: [0, 0], style: ervy.bg('cyan', 2) });

     var plot = ervy.scatter(scatterData, { legendGap: 18, width: 15 });
     // same as Linux XTERM where 0 code is interpreted as 1.
     var formatting = $.terminal.from_ansi(plot.replace(/\x1b\[0([A-D])/g, '\x1b[1$1'));
     return formatting;
}

$.terminal.defaults.formatters = [];
var term = $('body').terminal();
term.echo(scatter_plot());

它应该看起来像在Linux Xterm中：

但是它看起来像这样，参见codepen演示

当我写问题时，在移动光标时更改了一些+1和-1（请参见代码中的处理A-F ANSI转义），结果如下（代码片段具有最新代码）。

第一行被空格覆盖，整个图形向上和向右移动了一个位置（除了0,0青色点应该在“|”下面，宽度为2个字符，所以你应该看到它的右半部分，这个是正确的，但其余部分不正确）

这是我新编写的光标处理代码，在处理颜色之前进行，所以代码并不复杂。

// -------------------------------------------------------------------------------
var ansi_re = /(\x1B\[[0-9;]*[A-Za-z])/g;
var cursor_re = /(.*)\r?\n\x1b\[1A\x1b\[([0-9]+)C/;
var move_cursor_split = /(\x1b\[[0-9]+[A-G])/g;
var move_cursor_match = /^\x1b\[([0-9]+)([A-G])/;
// -------------------------------------------------------------------------------
function parse_ansi_cursor(input) {
    /*
        (function(log) {
            console.log = function(...args) {
                if (true || cursor.y === 11) {
                    return log.apply(console, args);
                }
            };
        })(console.log);
        */
    function length(text) {
        return text.replace(ansi_re, '').length;
    }
    function get_index(text, x) {
        var splitted = text.split(ansi_re);
        var format = 0;
        var count = 0;
        var prev_count = 0;
        for (var i = 0; i < splitted.length; i++) {
            var string = splitted[i];
            if (string) {
                if (string.match(ansi_re)) {
                    format += string.length;
                } else {
                    count += string.length;
                    if (count >= x) {
                        var rest = x - prev_count;
                        return format + rest;
                    }
                    prev_count = count;
                }
            }
        }
        return i;
    }
    // ansi aware substring, it just and add removed ansi escapes
    // at the beginning we don't care if the were disabled with 0m
    function substring(text, start, end) {
        var result = text.substring(start, end);
        if (start === 0 || !text.match(ansi_re)) {
            return result;
        }
        var before = text.substring(0, start);
        var match = before.match(ansi_re);
        if (match) {
            return before.match(ansi_re).join('') + result;
        }
        return result;
    }
    // insert text at cursor position
    // result is array of splitted arrays that form single line
    function insert(text) {
        if (!text) {
            return;
        }
        if (!result[cursor.y]) {
            result[cursor.y] = [];
        }
        var index = 0;
        var sum = 0;
        var len, after;
        function inject() {
            index++;
            if (result[cursor.y][index]) {
                result[cursor.y].splice(index, 0, null);
            }
        }
        if (cursor.y === 11) {
            //debugger;
        }
        if (text == "[46m  [0m") {
            //debugger;
        }
        console.log({...cursor, text});
        if (cursor.x === 0 && result[cursor.y][index]) {
            source = result[cursor.y][0];
            len = length(text);
            var i = get_index(source, len);
            if (length(source) < len) {
                after = result[cursor.y][index + 1];
                if (after) {
                    i = get_index(after, len - length(source));
                    after = substring(after, i);
                    result[cursor.y].splice(index, 2, null, after);
                } else {
                    result[cursor.y].splice(index, 1, null);
                }
            } else {
                after = substring(source, i);
                result[cursor.y].splice(index, 1, null, after);
            }
        } else {
            var limit = 100000; // infite loop guard
            var prev_sum = 0;
            // find in which substring to insert the text
            while (index < cursor.x) {
                if (!limit--) {
                    warn('[WARN] To many loops');
                    break;
                }
                var source = result[cursor.y][index];
                if (!source) {
                    result[cursor.y].push(new Array(cursor.x - prev_sum).join(' '));
                    index++;
                    break;
                }
                if (sum === cursor.x) {
                    inject();
                    break;
                }
                len = length(source);
                prev_sum = sum;
                sum += len;
                if (sum === cursor.x) {
                    inject();
                    break;
                }
                if (sum > cursor.x) {
                    var pivot = get_index(source, cursor.x - prev_sum);
                    var before = substring(source, 0, pivot);
                    var end = get_index(source, length(text));
                    after = substring(source, pivot + end);
                    if (!after.length) {
                        result[cursor.y].splice(index, 1, before);
                    } else {
                        result[cursor.y].splice(index, 1, before, null, after);
                    }
                    index++;
                    break;
                } else {
                    index++;
                }
            }
        }
        cursor.x += length(text);
        result[cursor.y][index] = text;
    }
    if (input.match(move_cursor_split)) {
        var lines = input.split('\n').filter(Boolean);
        var cursor = {x: 0, y: -1};
        var result = [];
        for (var i = 0; i < lines.length; ++i) {
            console.log('-------------------------------------------------');
            var string = lines[i];
            cursor.x = 0;
            cursor.y++;
            var splitted = string.split(move_cursor_split).filter(Boolean);
            for (var j = 0; j < splitted.length; ++j) {
                var part = splitted[j];
                console.log(part);
                var match = part.match(move_cursor_match);
                if (match) {
                    var ansi_code = match[2];
                    var value = +match[1];
                    console.log({code: ansi_code, value, ...cursor});
                    if (value === 0) {
                        continue;
                    }
                    switch (ansi_code) {
                        case 'A': // UP
                            cursor.y -= value;
                            break;
                        case 'B': // Down
                            cursor.y += value - 1;
                            break;
                        case 'C': // forward
                            cursor.x += value + 1;
                            break;
                        case 'D': // Back
                            cursor.x -= value + 1;
                            break;
                        case 'E': // Cursor Next Line
                            cursor.x = 0;
                            cursor.y += value - 1;
                            break;
                        case 'F': // Cursor Previous Line
                            cursor.x = 0;
                            cursor.y -= value + 1;
                            break;
                    }
                    if (cursor.x < 0) {
                        cursor.x = 0;
                    }
                    if (cursor.y < 0) {
                        cursor.y = 0;
                    }
                } else {
                    insert(part);
                }
            }
        }
        return result.map(function(line) {
            return line.join('');
        }).join('\n');
    }
    return input;
}

在代码中，result = [];是一系列行的数组，其中单个行可能在插入文本时被拆分成多个子字符串，如果它们是字符串数组，则代码可能会更简单。现在我只想修复光标位置。

这里是嵌入了from_ansi函数的codepen演示（内部有一个有问题的parse_ansi_cursor）。抱歉代码很长，但解析ANSI转义码并不简单。

我不确定如何移动光标（现在有+1或-1，我不确定），我也不确定是否应该在每行前增加cursor.y。我不确定这应该如何工作。我查看了Linux Xterm代码，但没有找到线索。看了Xterm.js，但散点图的ervy图完全损坏了。

我的from_ansi函数原始代码处理了一些ANSI光标代码，例如此代码：

        input = input.replace(/\x1b\[([0-9]+)C/g, function(_, num) {
            return new Array(+num + 1).join(' ');
        });

只有C，向前只需添加空格，它适用于 ANSI 艺术，但在 ervy 散点图中不起作用。

我认为这不是太广泛的问题，只是关于使用 ANSI 转义码移动光标和处理换行符的问题。而且它应该是一个简单的情况，光标应该只在单个字符串内移动，而不像真正的终端那样移动到外面（ervy 绘图输出 ANSI 转义码就是这样的）。

如果您能提供解释如何处理字符串和移动光标的答案，并且可以提供修复代码，那将是很好的。除非更简单并且是一个函数 parse_ansi_cursor(input) 并且与其余代码一起工作但具有固定的光标移动，否则我更喜欢现在修复我的代码而不是整个新实现。

编辑： 我发现我的 input.split('\n').filter(Boolean) 是错误的，应该是：

            var lines = input.split('\n');
            if (input.match(/^\n/)) {
                lines.shift();
            }
            if (input.match(/\n$/)) {
                lines.pop();
            }

看起来一些旧的ANSI转义规范中表示0不是零，而是默认值的占位符，这个规定已经被删除，但Xterm仍在使用。因此，我添加了这行解析代码，如果有0A或A，则其值为1。

var value = match[1].match(/^0?$/) ? 1 : +match[1];

剧情看起来更好了，但是光标还有问题。（我认为是光标 —— 不太确定。）

我已经再次更改了 +1/-1，现在它更接近（几乎与 XTerm 相同）。但是我的代码仍然存在错误。

编辑：根据 @jerch 的回答，我尝试使用 node ansi parser，但仍然无法解决如何处理光标的问题。

var cursor = {x:0,y:0};
result = [];
var terminal = {
    inst_p: function(s) {
        var line = result[cursor.y];
        if (!line) {
            result[cursor.y] = s;
        } else if (cursor.x === 0) {
            result[cursor.y] = s + line.substring(s.length);
        } else if (line.length < cursor.x) {
            var len = cursor.x - (line.length - 1);
            result[cursor.y] += new Array(len).join(' ') + s;
        } else if (line.length === cursor.x) {
            result[cursor.y] += s;
        } else {
            var before = line.substring(0, cursor.x);
            var after = line.substring(cursor.x + s.length);
            result[cursor.y] = before + s + after;
        }
        cursor.x += s.length;
        console.log({s, ...cursor, line: result[cursor.y]});
    },
    inst_o: function(s) {console.log('osc', s);},
    inst_x: function(flag) {
        var code = flag.charCodeAt(0);
        if (code === 10) {
            cursor.y++;
            cursor.x = 0;
        }
    },
    inst_c: function(collected, params, flag) {
        console.log({collected, params, flag});
        var value = params[0] === 0 ? 1 : params[0];
        switch(flag) {
            case 'A': // UP
                cursor.y -= value;
                break;
            case 'B': // Down
                cursor.y += value - 1;
                break;
            case 'C': // forward
                cursor.x += value;
                break;
            case 'D': // Back
                cursor.x -= value;
                break;
            case 'E': // Cursor Next Line
                cursor.x = 0;
                cursor.y += value;
                break;
            case 'F': // Cursor Previous Line
                cursor.x = 0;
                cursor.y -= value;
                break;
        }
    },
    inst_e: function(collected, flag) {console.log('esc', collected, flag);},
    inst_H: function(collected, params, flag) {console.log('dcs-Hook', collected, params, flag);},
    inst_P: function(dcs) {console.log('dcs-Put', dcs);},
    inst_U: function() {console.log('dcs-Unhook');}
};
var parser = new AnsiParser(terminal);
parser.parse(input);
return result.join('\n');

这只是一个简单的例子，忽略除换行和光标移动以外的所有内容。

以下是输出结果：

更新:

看起来每个光标移动应该是+= value或-= value，而我的value - 1;只是纠正了在清除终端上不起作用的ervy库中的错误。

- jcubic

Answer 1

首先，基于正则表达式的方法并不理想来处理转义序列。原因在于各种终端序列之间存在复杂的交互作用，有些会中断尚未关闭的序列，而其他一些（如一些控制代码）则在另一个序列中间继续工作，“外部”序列仍然正确结束。您将不得不在每个正则表达式中引入所有这些边缘情况（请参见 https://github.com/xtermjs/xterm.js/issues/2607#issuecomment-562648768 进行说明）。

通常解析转义序列相当棘手，我们甚至在 terminal-wg 中有一个相关问题。希望我们能从中获取一些对最小解析要求的要求，并且这绝对不会基于正则表达式 ;)

所有这些说法，使用一个真正的解析器会更容易处理所有边缘情况。一个DEC兼容解析器的好起点是https://vt100.net/emu/dec_ansi_parser。对于光标处理，您必须使用所有操作处理至少以下状态：

• ground
• escape
• csi_entry
• csi_ignore
• csi_param
• csi_intermediate

加上所有其他状态作为虚拟条目。此外，控制码需要特别注意（操作execute），因为它们可能随时干扰任何其他具有不同结果的序列。

更糟糕的是，官方的ECMA-48规范在某些方面与DEC解析器略有不同。尽管如此，大多数模拟器今天仍然试图追求DEC VT100+的兼容性。

如果您不想亲自编写解析器，可以使用/修改我的旧parser或我们在xterm.js中拥有的解析器（后者可能更难集成，因为它是基于UTF32码点操作的）。

- jerch

---

谢谢您的回答，我会尝试使用这些链接作为参考。同时，由于我不需要完整的VT100模拟器，因此我不需要支持所有功能。我正在尝试解析光标移动以显示一些ANSI艺术和图表。在这种情况下，那个状态图可能是我需要查看的内容。 - jcubic

是的 - 你可能不需要整个东西来处理光标移动，但仍然有很多正确处理错误恢复等问题。一个纯粹基于正则表达式的解决方案在这方面总是会失败的（仍然可能有80%的可能性可以工作，所以也许可以采用80/20法则）。 - jerch

我已经使用你的节点解析器编辑了问题，我的问题与光标有关，它应该只呈现ASCII字符，但是在标题下方有空白区域，绘图也被移位了。 - jcubic

你能在你的repo中开一个问题并指向它吗？这样我们就不必用来回修复污染SF，这只会使问题难以阅读。对于手头的问题 - 我会尝试“逐步调试”序列，看看哪个插入了额外的空格/行。要么处理那个已经是罪魁祸首，要么光标状态已经被先前的序列错误地处理了。 - jerch