如何从范围的开始和结束在 JavaScript 中的 DIV 中获取 innerHTML答案

【问题标题】：how to get innerHTML from range's start and end in DIV in JavaScript如何从范围的开始和结束在 JavaScript 中的 DIV 中获取 innerHTML
【发布时间】：2019-01-13 13:26:14
【问题描述】：

如何从父DIV获取innerHTML，并且innerHTML在选定的单词处停止？

例如，如果我选择了“asx”字样，我将得到This select some <b>is a <i>some 的结果警报innerHTML。

谢谢

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>

【问题讨论】：

stackoverflow.com/q/4652734

标签： javascript

【解决方案1】：

不可能让innerHTML“停”在一个词上。但是，可以通过编辑 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>

【讨论】：