如何在 JavaScript 中从 range 的开头和结尾获取 innerHTML

Question

如何从父div获取innerHTML，并且innerHTML在所选单词处停止？

例如，如果我选择了"asx"单词，我将在This select some <b>is a <i>some的HTML中获得结果警报。

谢谢

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>

Answer 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>