Jquery Set cursor at the end of the highlight text

I am working on my jquery code to highlight on the text to replace it with anchor tag.

When I click on the button to replace the highlight text with the anchor tag, I want to put the cursor at the end of that highlighted text, example: when I have the full text "My own selected text sentence" and I highlight on the text called "selected" then replace it with anchor tag then I want to put the cursor at the end of the "selected" text just before the "text".

When I highlight on the text called Selected and click on the modal, the text will show as this:

<span class="highlight">Selected</span> 

So when I put the url in the input textbox and when I click on the ok button, it will replace the text with the anchor tag just like this:

<a href="http://www.google.com" target="_blank">Selected</a> 

But I am unable to put the cursor just after the Selected before the text. Here is what I have tried:

highlight_text = '<span class="highlight">' + Text + '</span>'; anchor_tag = '<a href="' + linkURL + '" target="_blank">' + Text + '</a>'; $('#replyMessage').html($("#replyMessage").html().replace(highlight_text, anchor_tag)); placeAtEndOfText(document.querySelector('#replyMessage') 

Here is the full code:

$(document).on('click', '#quick_insert-link', function(e) { e.preventDefault(); var selected_text = window.getSelection ? '' + window.getSelection() : document.selection.createRange().text; if (selected_text) { highlightSelection(); $('#quick_linkdialog-text').val(selected_text); } }); $(document).on('click', '#quick_ok', function(e) { if ($('#quick_linkdialog-web-button').is(':checked')) { var selected_text = window.getSelection ? '' + window.getSelection() : document.selection.createRange().text; var linkURL = $('#quick_linkdialog-onweb-tab-input').val(); var Text = $('#quick_linkdialog-text').val(); $('.dialog_background_cover').remove(); $('#quick_linkdialog').hide(); $('#replyMessage').focus(); if ($('#quick_linkdialog-onweb-tab-input').val().indexOf('http://') == -1) { //$('#replyMessage').focus(); if(selectedNode != null && selectedNode.nodeName === 'A') { selectedNode.href = "http://"+linkURL; selectedNode.innerText = Text; } else { highlight_text = '<span class="highlight">' + Text + '</span>'; anchor_tag = '<a href="' + linkURL + '" target="_blank">' + Text + '</a>'; $('#replyMessage').html($("#replyMessage").html().replace(highlight_text, anchor_tag)); placeAtEndOfText(document.querySelector('#replyMessage').find(anchor_tag)); //document.execCommand('insertHTML', null, '<a href="' + linkURL + '" target="_blank">' + Text + '</a>'); } } } }); function highlightSelection() { var userSelection = window.getSelection(); for(var i = 0; i < userSelection.rangeCount; i++) { highlightRange(userSelection.getRangeAt(i)); } } function placeAtEndOfText(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != 'undefined') { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != 'undefined') { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } 

When I tried to use placeAtEndOfText function, it will only put the cursor at the end of the text just after "sentence" for the element #replyMessage. I am unable to put the cursor at the end of the "selected" when I try to use placeAtEndOfText function.

Can you please show me an example how I can put the cursor at the end of the text called selected after when I replaced with the anchor tag?

Thank you.