用智能引号替换哑引号并将插入符号位置保留在 contenteditable div

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/