javascript - 带格式的 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);
});