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); 
});