how to get innerHTML from range's start and end in DIV in JavaScript

Question

How to get innerHTML from parent DIV and the innerHTML stop at selected word?

like example, I will get the result alert innerHTML of This select some <b>is a <i>some, if I selected the 'asx' word.

Thank you

function selected(element) {
    var start = '';
    var end = '';
    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.startContainer, range.startOffset);

            var start = preCaretRange.toString();

            alert(start);

        }
    } 

}

<div id="editor" contenteditable="true">This select some <b>is a <i>some asx</i> sdc</b> select some text in some here.</div>
<button type="button" onclick="selected(document.querySelector('#editor'))">edit</button>

https://stackoverflow.com/q/4652734 – IVO GELOV Aug 06 '18 at 14:49 — IVO GELOV, Aug 06 '18 at 14:49

score 0 · Answer 1 · answered Jan 06 '21 at 17:45

It is not possible to make the innerHTML "stop" at a word. However, it is possible to change what you alert by editing the string output of the innerHTML.

function selected(element) {
  var sel;
  if (typeof window.getSelection != "undefined") {
    sel = window.getSelection();
    if (sel.rangeCount > 0) {
      var range = window.getSelection().getRangeAt(0);
      var preCaretRange = range.cloneRange();
      preCaretRange.selectNodeContents(element);
      preCaretRange.setEnd(range.startContainer, range.startOffset);
      var start = preCaretRange.toString();
      alert(start.split("asx")[0]);
    }
  }
}

<div id="editor" contenteditable="true">This select some <b>is a <i>some asx</i> sdc</b> select some text in some here.</div>
<button type="button" onclick="selected(document.querySelector('#editor'))">edit</button>

how to get innerHTML from range's start and end in DIV in JavaScript

1 Answers1