How to select text based on carriage position?

Question

I want to have a button that adds highlight to the currently selected text. I plan to do this with a caret position of choice. I have the following code:

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

function showCaretPos() {
    var el = document.getElementById("test");
    var caretPosEl = document.getElementById("caretPos");
    caretPosEl.innerHTML = "Caret position: " + getCaretCharacterOffsetWithin(el);
}

document.body.onkeyup = showCaretPos;
document.body.onmouseup = showCaretPos;

Non-editable text. Editable is below:
<div id="test" contenteditable="true">Hello, some <b>bold</b> and <i>italic and <b>bold</b></i> text</div>
<div id="caretPos"></div>

Run codeHide result

In the above code, the carriage position is found. How now I can use the caret position to select only that text position.

Possible idea Get the carriage position on top and now substr()to add highlight. str.substr(above caret position).

What is the best way to do this?

EDIT

I do not want to change the color choice. I just want to use the caret position to add a div that acts like a marker. For instance:

Hi, my name is Bob.

, . , div .

, name. , . . , name , , . - : <div id='highlight'> name is </div>

Answer 1

2 , , , <span>, <div>. ...

• ... ()...
• ... <span> <div>...
• ... backgroundColor ...
• ... <span/div>...
• ... , , <span/div> range.

<span>, , , . <div> .

SNIPPET

var spanEdit = document.getElementById('spanEdit');
var divEdit = document.getElementById('divEdit');

function highlightSpan() {
  var range = document.getSelection().getRangeAt(0);
  var contents = range.extractContents();
  var node = document.createElement('span');
  node.style.backgroundColor = "yellow";
  node.appendChild(contents);
  range.insertNode(node);
}

function highlightDiv() {
  var range = document.getSelection().getRangeAt(0);
  var contents = range.extractContents();
  var node = document.createElement('div');
  node.style.backgroundColor = "yellow";
  node.appendChild(contents);
  range.insertNode(node);
}

spanEdit.onkeyup = highlightSpan;
spanEdit.onmouseup = highlightSpan;

divEdit.onkeyup = highlightDiv;
divEdit.onmouseup = highlightDiv;

<div id='spanEdit' contenteditable="true">Highlight inserted span. This uses extractContents() method.</div>
<div>&nbsp;</div>
<div id='divEdit' contenteditable="true">Highlight inserted div. This uses extractContents() method.</div>

Hide result