6

TL;博士

我有替换文本、字符串和光标位置（一个数字）的函数，如果字符串的长度发生变化，我需要为用替换函数创建的新字符串获取更正的位置（一个数字）：

input and cursor position:  foo ba|r text
replacement: foo -> baz_text, bar -> quux_text
result: baz_text qu|ux_text text

input and cursor position:  foo bar| text
replacement: foo -> baz_text, bar -> quux_text
result: baz_text quux_text| text

input and cursor position:  foo bar| text
replacement: foo -> f, bar -> b
result: f b| text

input and cursor position:  foo b|ar text
replacement: foo -> f, bar -> b
result: f b| text

问题是我可以在原始文本上使用子字符串，但是替换将不匹配整个单词，因此需要对整个文本执行此操作，但子字符串与替换不匹配。

当原始光标位于替换单词的中间时，我也可以解决光标始终位于单词末尾的解决方案。

现在我的实现，在 jQuery 终端中，我有一组格式化程序函数：

$.terminal.defaults.formatters

他们接受一个字符串，它应该返回新的字符串，它工作正常，除了这种情况：

当我有格式化程序时，如果打破命令行会改变长度，例如这个格式化程序：

$.terminal.defaults.formatters.push(function(string) {
   return string.replace(/:smile:/g, 'a')
                .replace(/(foo|bar|baz)/g, 'text_$1');
});

那么当命令行获取新字符串时光标位置是错误的。

我试图解决这个问题，但它没有按预期工作，终端的内部看起来像这样，

当我更改时，position我正在创建另一个formatted_position在命令行中用于显示光标的变量。为了得到这个值，我使用这个：

formatted_position = position;
var string = formatting(command);
var len = $.terminal.length(string);
var command_len = $.terminal.length(command);
if (len !== command_len) {
    var orig_sub = $.terminal.substring(command, 0, position);
    var orig_len = $.terminal.length(orig_sub);
    var formatted = formatting(orig_sub);
    var formatted_len = $.terminal.length(formatted);
    if (orig_len > formatted_len) {
        // if formatting make substring - (text before cursor)
        // shorter then subtract the difference
        formatted_position -= orig_len - formatted_len;
    } else if (orig_len < formatted_len) {
        // if the formatted string is longer add difference
        formatted_position += formatted_len - orig_len;
    }
}

if (formatted_position > len) {
    formatted_position = len;
} else if (formatted_position < 0) {
    formatted_position = 0;
}

$.terminal.substring 和 $.terminal.length 是终端格式感知的辅助函数（文本看起来像这样[[b;#fff;]hello]），如果您要编写解决方案，您可以使用普通文本并使用字符串方法。

问题是当我将光标移动到更改的单词中间时

当文本较长时它会起作用，但对于较短的字符串，当文本位于被替换的单词的中间时，光标会向右跳。

我也尝试使用以下代码解决此问题：

function find_diff(callback) {
    var start = position === 0 ? 0 : position - 1;
    for (var i = start; i < command_len; ++i) {
        var substr = $.terminal.substring(command, 0, i);
        var next_substr = $.terminal.substring(command, 0, i + 1);
        var formatted = formatting(next_substr);
        var substr_len = $.terminal.length(substr);
        var formatted_len = $.terminal.length(formatted);
        var diff = Math.abs(substr_len - formatted_len);
        if (diff > 1) {
            return diff;
        }
    }
    return 0;
}

...

} else if (len < command_len) {
    formatted_position -= find_diff();
} else if (len > command_len) {
    formatted_position += find_diff();
}

但是我认为这会让情况变得更糟，因为当光标位于替换单词之前或中间时它会找到差异，并且只有当光标位于替换单词的中间时它才应该找到差异。

您可以在此 codepen https://codepen.io/jcubic/pen/qPVMPg?editors=0110中看到我尝试的结果（允许输入 emoji 和 foo bar baz 被替换text_$1）

更新：

我已经使它与此代码一起工作：

    // ---------------------------------------------------------------------
    // :: functions used to calculate position of cursor when formatting
    // :: change length of output text like with emoji demo
    // ---------------------------------------------------------------------
    function split(formatted, normal) {
        function longer(str) {
            return found && length(str) > length(found) || !found;
        }
        var formatted_len = $.terminal.length(formatted);
        var normal_len = $.terminal.length(normal);
        var found;
        for (var i = normal_len; i > 1; i--) {
            var test_normal = $.terminal.substring(normal, 0, i);
            var formatted_normal = formatting(test_normal);
            for (var j = formatted_len; j > 1; j--) {
                var test_formatted = $.terminal.substring(formatted, 0, j);
                if (test_formatted === formatted_normal &&
                    longer(test_normal)) {
                    found = test_normal;
                }
            }
        }
        return found || '';
    }
    // ---------------------------------------------------------------------
    // :: return index after next word that got replaced by formatting
    // :: and change length of text
    // ---------------------------------------------------------------------
    function index_after_formatting(position) {
        var start = position === 0 ? 0 : position - 1;
        var command_len = $.terminal.length(command);
        for (var i = start; i < command_len; ++i) {
            var substr = $.terminal.substring(command, 0, i);
            var next_substr = $.terminal.substring(command, 0, i + 1);
            var formatted_substr = formatting(substr);
            var formatted_next = formatting(next_substr);
            var substr_len = length(formatted_substr);
            var next_len = length(formatted_next);
            var test_diff = Math.abs(next_len - substr_len);
            if (test_diff > 1) {
                return i;
            }
        }
    }
    // ---------------------------------------------------------------------
    // :: main function that return corrected cursor position on display
    // :: if cursor is in the middle of the word that is shorter the before
    // :: applying formatting then the corrected position is after the word
    // :: so it stay in place when you move real cursor in the middle
    // :: of the word
    // ---------------------------------------------------------------------
    function get_formatted_position(position) {
        var formatted_position = position;
        var string = formatting(command);
        var len = $.terminal.length(string);
        var command_len = $.terminal.length(command);
        if (len !== command_len) {
            var orig_sub = $.terminal.substring(command, 0, position);
            var orig_len = $.terminal.length(orig_sub);
            var sub = formatting(orig_sub);
            var sub_len = $.terminal.length(sub);
            var diff = Math.abs(orig_len - sub_len);
            if (false && orig_len > sub_len) {
                formatted_position -= diff;
            } else if (false && orig_len < sub_len) {
                formatted_position += diff;
            } else {
                var index = index_after_formatting(position);
                var to_end = $.terminal.substring(command, 0, index + 1);
                //formatted_position -= length(to_end) - orig_len;
                formatted_position -= orig_len - sub_len;
                if (orig_sub && orig_sub !== to_end) {
                    var formatted_to_end = formatting(to_end);
                    var common = split(formatted_to_end, orig_sub);
                    var re = new RegExp('^' + $.terminal.escape_regex(common));
                    var to_end_rest = to_end.replace(re, '');
                    var to_end_rest_len = length(formatting(to_end_rest));
                    if (common orig_sub !== common) {
                        var commnon_len = length(formatting(common));
                        formatted_position = commnon_len + to_end_rest_len;
                    }
                }
            }
            if (formatted_position > len) {
                formatted_position = len;
            } else if (formatted_position < 0) {
                formatted_position = 0;
            }
        }
        return formatted_position;
    }

当您将表情符号作为第一个字符输入并且光标位于 :smile: 单词的中间时，它不适用于一种情况。如何修复 get_formatted_position 函数以在替换后具有正确的固定位置？

更新：我提出了不同且简单的问题，并使用接受正则表达式和字符串的 trackingReplace 函数得到了解决方案，因此我更改了格式化程序的 API 以接受带有正则表达式和字符串的数组，以及替换后正确的子字符串位置

4

1 回答 1

1

所以我能够完成给定的任务，但是我无法将它实现到库中，因为我不确定如何在那里实现很多东西。

我用香草 javascript 制作了它，所以在实现到库中时不应该有任何问题。该脚本主要依赖于 textarea、input 或类似元素上可用的selectionStart和selectionEnd属性。在所有替换完成后，新的选择被设置为 textarea usingsetSelectionRange方法。

// sel = [selectionStart, selectionEnd]
function updateSelection(sel, replaceStart, oldLength, newLength){
    var orig = sel.map(a => a)
    var diff = newLength - oldLength
    var replaceEnd = replaceStart + oldLength
    if(replaceEnd <= sel[0]){
        //  Replacement occurs before selection
        sel[0] += diff
        sel[1] += diff
        console.log('Replacement occurs before selection', orig, sel)
    }else if(replaceStart <= sel[0]){
        //  Replacement starts before selection
        if(replaceEnd >= sel[1]){
            //  and ends after selection
            sel[1] += diff
        }else{
            //  and ends in selection
        }
        console.log('Replacement starts before selection', orig, sel)
    }else if(replaceStart <= sel[1]){
        //  Replacement starts in selection
        if(replaceEnd < sel[1]){
            //  and ends in seledtion
        }else{
            //  and ends after selection
            sel[1] += diff
        }
        console.log('Replacement starts in selection', orig, sel)
    }
}

这是整个演示：codepen。

PS：根据我的观察，格式脚本经常运行。

于 2017-10-12T04:35:38.163 回答