Question

我正试图在contenteditable div（如here）中动态地将一些愚蠢的引号转换为弯引号，使用以下内容：

$("#editor").on("keyup", ".content", function () {
    $(".content").html(function() {
        var start = this.selectionStart, end = this.selectionEnd;
        return $(this).html()
            .replace(/'\b/g, "\u2018")      // opening single
            .replace(/\b'/g, "\u2019")      // closing single
            .replace(/"\b/g, "\u201c")      // opening double
            .replace(/\b"/g, "\u201d")      // closing double
            .replace(/--/g,  "\u2014")      // em-dash
            .replace(/\b\u2018\b/g,  "'");  // handle conjunctions
        this.setSelectionRange(start, end);
    });
// other stuff happens here...
});

return位本身可以正常工作，但在每次击键后将插入位置移回潜水开始，这显然是不可取的。但是试图保持插入位置（使用一些看到here的代码）会在JSHint中抛出Unreachable 'this' after 'return'，因此实际上并没有在浏览器中执行任何操作。有人能指出我在这方面的正确方向吗？

Answer 1

我总是倾向于将this保留在变量中以避免范围问题。我也不太明白为什么你这么努力地将所有内容封装在匿名函数中。尝试按以下方式更改代码：

$("#editor").on("keyup", ".content", function () {
    var target = this;
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    var startOffset = range.startOffset;
    var endOffset = range.endOffset;
    var html = $(target).html();
    var newHtml = html.replace(/'\b/g, "\u2018") // opening single
    .replace(/\b'/g, "\u2019") // closing single
    .replace(/"\b/g, "\u201c") // opening double
    .replace(/\b"/g, "\u201d") // closing double
    .replace(/--/g, "\u2014") // em-dash
    .replace(/\b\u2018\b/g, "'"); // handle conjunctions
    var delta = html.length - newHtml.length;
    $(target).html(newHtml);

    var newRange = document.createRange();
    newRange.setStart(range.startContainer, startOffset - delta);
    newRange.setEnd(range.startContainer, endOffset - delta);
    selection.removeAllRanges();
    selection.addRange(newRange);

    // other stuff happens here...
});

我更正了代码，使其在Chrome下与contenteditable一起使用。显然，IE不会发生将插入位置重置为开始的行为。所需知识见于： https://developer.mozilla.org/en-US/docs/Web/API/Selection

Edit2：我用“ - ”解决了问题并准备了一个小提琴。在我测试的时候，Chrome和IE都能很好地工作。 http://jsfiddle.net/mcoo/8oyn41b1/

用智能引号代替哑巴引号并在可信的div中保持插入位置

1 个答案: