How to place cursor at the end of text after replacing HTML with jQuery?

Question

I have a contenteditable div and trying to replace <font> tag with <span> tag but after replacing the html using jQuery replaceWith() function cursor defaults to the beginning of the text however I want it at the end of the replacing html.

Here is the DEMO to reproduce the issue. Let me know if there is any problem reproducing the issue.

Here is demo code gist

<div id="test" contenteditable=true>
  <p> <font color="blue">Text to be replaced</font> </p>
</div>
<a id="replace" href="javascript:void(null);">replace</a>

JS code

$('#test').focus();
$('#replace').on({
  mousedown: function (event) {
    event.preventDefault();
  },
  click: function () {
    $('#test').find('font').replaceWith(function () {
      return '<span style="color:red">' + 'New Text' + '</span>'
    });
  }
});

EDIT: Here the problem may sound duplicate but it is indeed different as you see the content gets replaced. I might be replacing the part of that text selected by user and not the entire text. So I need to place the cursor at the end of the html which is replacing the original html.

Answer 1

If you create the <span> element by hand using document.createElement() and keep a reference to it, you can easily place the caret immediately after it.

Demo: http://jsfiddle.net/Gaqfs/10/

Code:

function placeCaretAfter(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.setStartAfter(el);
        range.collapse(true);
        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();
    }
}

$('#test').focus();
$('#replace').on({
    mousedown: function (event) {
        event.preventDefault();
    },
    click: function () {
        var span = document.createElement("span");
        span.style.color = "red";
        span.innerHTML = "New Text";
        $('#test').find('font').replaceWith(span);
        placeCaretAfter(span);
    }
});

Answer 2

You can use this function

function placeCaretAtEnd(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();
    }
}

call it as follows

placeCaretAtEnd( document.getElementById("content") );

EXAMPLE