javascript - 更改函数的加载顺序会意外破坏代码

Question

我有一个如下所示的脚本:

function autoCorrect(searchString, replaceString) {
    $("body").on("keyup", "textarea", function() {
        // finds current cursor position
        var pos = $(this).prop("selectionStart");
        // this turns the textarea in a string
        var text = $(this).val();
        //only search for strings just typed
        var stringToSearch = text.substring(pos - searchString.length, pos);
        if (searchString == stringToSearch) {
            //if there is a match put the replaceString in the right place
            var newText = text.substring(0, pos - searchString.length) + replaceString + text.substring(pos);
            $(this).val(newText);
            //adjust the cursor position to the new text
            var newpos = pos - searchString.length + replaceString.length;
            this.setSelectionRange(newpos, newpos);
        }
    });
}
autoCorrect("=>", '⇒');
autoCorrect("->", "→");
autoCorrect("+-", "±");
autoCorrect("<=", "≤");
autoCorrect(">=", "≥");

现在，我想稍微改变一下，我想改变函数运行的顺序。像这样:

$("body").on("keyup", "textarea", function() {
    function autoCorrect(searchString, replaceString) {
        // finds current cursor position
        var pos = $(this).prop("selectionStart");
        // this turns the textarea in a string
        var text = $(this).val();
        //only search for strings just typed
        var stringToSearch = text.substring(pos - searchString.length, pos);
        if (searchString == stringToSearch) {
            //if there is a match put the replaceString in the right place
            var newText = text.substring(0, pos - searchString.length) + replaceString + text.substring(pos);
            $(this).val(newText);
            //adjust the cursor position to the new text
            var newpos = pos - searchString.length + replaceString.length;
            this.setSelectionRange(newpos, newpos);
        }
    }
    autoCorrect("=>", '⇒');
    autoCorrect("->", "→");
    autoCorrect("+-", "±");
    autoCorrect("<=", "≤");
    autoCorrect(">=", "≥");
});

但是这个脚本不再像这样工作了。我只是不明白为什么这会破坏我的代码。

这是我的jsfiddle:http://jsfiddle.net/4SWy6/4/

Answer 1

新函数创建新范围:

$("body").on("keyup", "textarea", function () {
    autoCorrect("=>", '⇒', this);
    autoCorrect("->", "→", this);
    autoCorrect("+-", "±", this);
    autoCorrect("<=", "≤", this);
    autoCorrect(">=", "≥", this);
});

function autoCorrect(searchString, replaceString, elem) {
    var acList = {
        "=>": '⇒',
        "->": "→",
        "+-": "±",
        "<=": "≤",
        ">=": "≥"
    },
        pos = elem.selectionStart,
        text = elem.value,
        stringToSearch = text.substring(pos - searchString.length, pos);

    if (searchString == stringToSearch) {
        var newpos = pos - searchString.length + replaceString.length;
        elem.value = text.substring(0, pos - searchString.length) + replaceString + text.substring(pos);
        this.setSelectionRange(newpos, newpos);
    }
}

FIDDLE

编辑:

基于评论询问您是否可以传递一个键/值对的对象来与元素一起替换，我编写了这个，它应该适用于您传递它的任何对象:

$("body").on("keyup", "textarea", function () {
    var acList = {
        "=>": '⇒',
        "->": "→",
        "+-": "±",
        "<=": "≤",
        ">=": "≥"
    };
    autoCorrect(acList, this);
});

function autoCorrect(acList, elem) {
    var regstr = Object.keys(acList).join("|").replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$]/g, "\\$&"),
        reg    = new RegExp('('+ regstr +')', "gi"),
        pos    = elem.selectionStart,
        diff   = 0;

    elem.value = elem.value.replace(reg, function(x) {
        diff += x.length - acList[x].length;
        return acList[x];
    });

    elem.setSelectionRange(pos-diff, pos-diff);
}

FIDDLE

顺便说一句，这并不是真正的跨浏览器，因为 selectionStart 和 setSelectionRange 并不在所有浏览器中工作，Object.keys 也不起作用，因此根据您需要支持的浏览器，您可能必须填充这些方法。