Как я могу вставить div в том месте, где пользователь нажимает внутри div?

Question

Предположим, у меня есть div, содержащий предложение, например, как один, перечисленных ниже:

<div class="sentence">This is a sentence</div> 

Я пытаюсь создать обработчик функции/событий, которые будут распознавать, когда пользователь щелкает по тексту внутри <div>. Но, когда они нажимают внутри <div>, функция должна точно знать, где они щелкнули, поэтому я могу вставить <span> в этом месте. Например, если пользователь нажмет между буквами «п» и «т» в слове «фразе», то я хочу, чтобы вставить <span> там, так что я в конечном итоге с

<div class="sentence">This is a sen<span>test</span>tence</div> 

Что-то вроде этого:

$('.sentence').on('click', function (e) { 
    var to_insert = '<span>test</span>'; 
    // determine exactly where inside the div I clicked 
    // insert 'to_insert' at that location 
}); 

Любые идеи?

Answer 1

Вы можете получить позицию мыши в строку, используя window.getSelection().anchorOffset

JS

$('.sentence').on('click', function (e) { 
    var to_insert = 'test'; 
    var anchorOffset = window.getSelection().anchorOffset; 
    var resultHtml = $(this).html().substring(0, anchorOffset) + to_insert + $(this).html().substring(anchorOffset); 
    $(this).html(resultHtml); 
}); 

DEMO