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.

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.

• javascript
• jquery
• contenteditable
• content-editor

• possible duplicate of stackoverflow./questions/4715762/… – EvilEpidemic Commented Jul 25, 2013 at 8:37
• This answer might help (how to set cursor to a position). – Amadan Commented Jul 25, 2013 at 8:38
• 1 @EvilEpidemic That one is for textarea and does not help in correctly for contenteditable, however I ll have closer look. Thanks. – ʞɹᴉʞ ǝʌɐp Commented Jul 25, 2013 at 8:41
• 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. – ʞɹᴉʞ ǝʌɐp Commented Jul 25, 2013 at 8:45
• stackoverflow./a/4238971/96100 – Tim Down Commented Jul 25, 2013 at 10:03

2 Answers 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

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