range 獲取選中元素，window.getSelection 配合 range 選中內容
實例代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo ： Textarea 元素的光標位置</title>
<style>
#result {
font-size:18px;
line-height:25px;
padding-left:20px;
}
#test{
width: 500px;
height: 300px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>Textarea Div 元素的光標位置</h1>
<ul>
<li>獲取 Textarea Div 元素當前的光標位置</li>
<li>設置回原先的 Textarea Div 元素的光標位置</li>
</ul>
<form action="#">
<div id="test" contenteditable="true">1234567891326548946</div>
<p>
<input type="button" id="get" value="Get Cursor Position"/>
<input type="button" id="set" value="Set Cursor Position"/>
</p>
</form>
<h2>Textarea Range：</h2>
<div id="result"></div>
<script type="text/javascript">
var cursorPosition = {
get: function (textarea) {
var setSelectionRange = getSelection().getRangeAt(0);
var rangeData = {text: "", start: 0, end: 0 };
if (setSelectionRange) { // W3C
textarea.focus();
rangeData.start= setSelectionRange.startOffset;
rangeData.end = setSelectionRange.endOffset;
rangeData.text = (rangeData.start != rangeData.end) ? textarea.innerText.substring(rangeData.start, rangeData.end): "";
}
return rangeData;
},
set: function (textarea, rangeData) {
try{
var content=textarea.firstChild;
var selection = window.getSelection();
try{
var range = selection.getRangeAt(0);
range.setStart(content,rangeData.start);
range.setEnd(content,rangeData.end);
}catch (e1) {
range=document.createRange();
range.setStart(content,rangeData.start);
range.setEnd(content,rangeData.end);
selection.addRange(range);
}
}catch (e) {
console.log(e);
}
},
}
var tx=document.getElementById("test"),
re=document.getElementById("result"),
pos;
document.getElementById("get").onclick = function(){
pos = cursorPosition.get(tx);
re.innerHTML=("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--': pos.text));
}
document.getElementById("set").onclick = function(){
cursorPosition.set(tx, pos);
}
</script>
</body>
</html>
參考資料：
https://www.w3school.com.cn/xmldom/dom_range.asp
https://developer.mozilla.org/zh-CN/docs/Web/API/Range
https://www.w3cschool.cn/fetch_api/fetch_api-tij22wqq.html