div格式的搜索表单

Question

我正在尝试创建一个突出显示语法的搜索字段，当我键入时，某些项目是特定颜色，粗体，下划线等。在我输入时，我希望单词in变为粗体。这适用于我目前拥有的内容，但是当键入in时，光标将转到div的开头，并且您无法在单词in之后键入任何内容。我该怎么做才能解决这个问题？您可以看到jsfiddle here。

JavaScript：

$(document).on("keyup", "#q", function(){
    var val = $(this).text();
    val = val.replace(/\sin\s/ig, " <b>in</b> ");
    $(this).html(val);
});

HTML

<div id="q" name="q" class="form-control input-lg" contenteditable="true"></div>

Answer 1

使用rangy library，我能够像这样完成此任务：

$(document).on("keyup", "#q", function(){
    var savedSel = rangy.saveSelection();
    var val = $(this).html();
    val = val.replace(/\sin\s/ig, " <b>in</b> ");
    $(this).html(val);
    rangy.restoreSelection(savedSel);
});