Javascript 如何在html contenteditable div标记中获取选定的文本位置？_Javascript

Javascript 如何在html contenteditable div标记中获取选定的文本位置？

javascript

Javascript 如何在html contenteditable div标记中获取选定的文本位置？,javascript,Javascript,我需要选定的文本位置区域，以下是我在文本区域中的操作方式： //my textarea let textarea = document.getElementById('textarea'); textarea.addEventListener('mouseup', function(){ console.log(this.selectionStart); //return integer }) 这完全适用于textarea，但不适用于contentEditable div标记，它不返回整

我需要选定的文本位置区域，以下是我在文本区域中的操作方式：

//my textarea
let textarea = document.getElementById('textarea');

textarea.addEventListener('mouseup', function(){
  console.log(this.selectionStart); //return integer
})

这完全适用于textarea，但不适用于contentEditable div标记，它不返回整数值，而是返回undefined，为什么以及如何获取contentEditable div标记中的选定文本位置

//myDiv
<div id="textarea" contenteditable="true">
   <p> I am on </p>
</div>

//myDiv
我在

我需要一个纯javascript解决方案，而不是jquery。

获取所选位置可以使用文档的范围观察者检索contenteditable div的选定位置。API与纹理元素略有不同。注意：可以使用类似（也许更好）的解决方案（信用：Tim Down）

//步骤1：检索元素
让textarea=document.querySelectorAll（'.textarea'）；
//步骤2：绑定事件
textarea.forEach（txt=>{
txt.addEventListener（'mouseup'，eventHandler）
txt.addEventListener（'keyup'，eventHandler）
})
函数eventHandler（e）{getPosition（e.target）}
//步骤3：确定光标位置
功能位置（el）{
让位置={start:0，end:0}；
让selection=document.getSelection（）；
if（el.matches（'textarea'））{
设偏移量=1
position.start=el.selectionStart+offset
position.end=el.selectionEnd+偏移量
}
否则{
if（selection.rangeCount）{
让range=selection.getRangeAt（0）；
让range2=range.cloneRange（）//不要弄乱可见光标
范围2.selectNodeContents（el）//选择内容
position.start=range.startOffset
position.end=range.endOffset
}
}
console.log（position.start、position.end）
}


我在
我在

您可以使用

选择API

在页面中获取任何选定文本

此API目前处于工作草稿状态

以下是一个工作示例：

document.addEventListener('selectionchange', () => {
  console.log("Text :", document.getSelection().toString());
  console.log("Position:", document.getSelection().focusOffset);
});

试试这个：

<html>

<body>
    <div id="textarea" contenteditable="true">
        <p>I am on dsvsdvsdv vsdvdsvds sddvdsvds vdsdds sdvdsvdsv vdsvdsvds dsvdsvdsvdsv vsdvdsv sddvsdvds vdsvdsvdsv dsvdefwfs</p>
    </div>
    <script>
        function selection() {
            if (window.getSelection)
                return window.getSelection();
        }

        let textarea = document.getElementById('textarea');

        textarea.addEventListener('mouseup', function () {
            console.log(selection())
            console.log(textarea.innerText.indexOf(selection()))
        })
    </script>
</body>

</html>


我使用的是dsvsdvsdv vsdvdsvds sddvdsvds sdvdsvdsv vdsvdsvds dsvdsvdsvdsv vsdvdsv sddvsdvds vdsvdsvds vdsvdsvdsv dsvdefwfs
函数选择（）{
if（window.getSelection）
返回window.getSelection（）；
}
设textarea=document.getElementById（'textarea'）；
textarea.addEventListener（'mouseup'，function（）{
console.log（selection（））
console.log（textarea.innerText.indexOf（selection（）））
})

这非常有效：

您是否正在尝试

window.getSelection（）.toString（）

？不确定否决投票的原因，但我将尝试用更多信息更新（或删除）答案。否则，请允许我解决您的担忧