selectionStart and selectionEnd in contenteditable element

Question

I have been struggling the selectionStart and selectionEnd attributes of textarea to make them work with contenteditable d

Answer 1

Try this, it returns the selected text, no matter if it's contentEditable or not.

function GetSelectedText() {

            if (document.getSelection) {    // all browsers, except IE before version 9
                var sel = document.getSelection();
                    // sel is a string in Firefox and Opera, 
                    // and a selectionRange object in Google Chrome, Safari and IE from version 9
                    // the alert method displays the result of the toString method of the passed object
                alert(sel);
            } 
            else {
                if (document.selection) {   // Internet Explorer before version 9
                    var textRange = document.selection.createRange();
                    alert(textRange.text);
                }
            }
        }

<div>Test Example Microsoft T-shirt box</div>
<button onClick="GetSelectedText()">Get text</button>

I make this example in jsfiddler, see that enter link description here

Answer 2

This answer uses Selection#modify, which is non-standard, but at least, I suggest you to use "insertText" command:

function replaceVal(val, step) {
  var selection = window.getSelection();
  for (var i = 0; i < step; i += 1) {
    selection.modify('extend', 'backward', 'character');
  }
  document.execCommand('insertText', false, val);
}

<label for="editable">Editable:</label>
<div contenteditable="true" id="editable">Test test test</div>
<label for="step">Step:</label>
<input type="number" id="step" name="step" min="0" step="1" value="0" />
<button onClick="replaceVal('insertion', Number(document.getElementById('step').value))">Get text</button>