鍍金池/ 問答/HTML/ js如何獲取文本被選中段落的索引？

js如何獲取文本被選中段落的索引？

如何獲取一段文本當(dāng)中被鼠標(biāo)選中的文字在當(dāng)前文本中的起始索引和結(jié)束索引？

clipboard.png
現(xiàn)在能獲取到文本，但是獲取不到選中文本在當(dāng)前段落中的索引，哪位大神知道請指教？

回答
編輯回答
詆毀你

使用getSelection可獲取到選中文字的相關(guān)信息，包括起點(diǎn)和結(jié)束點(diǎn)。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="example">
    <p>4月13日消息，據(jù)臺灣媒體報道，32歲的孫燕姿(Sng Ee Tze)和后天將滿34歲的荷蘭籍印度尼西亞男友納迪姆(Nadim Van Der Ros)交往5年，曾說過"有空就結(jié)婚"的她，果然趁著宣傳期尾聲，于3月31日在新加坡登記注冊了！昨消息傳開，她未否認(rèn)，僅說會選擇適當(dāng)時間公布喜訊，所屬"美妙音樂"則表示她個性低調(diào)，婚禮只會邀請雙方親友，也不會透露細(xì)節(jié)，但據(jù)新加坡可靠消息指出，婚宴訂在5月初。</p>
<button id="button">選中一些文字，然后點(diǎn)擊本按鈕</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var oBtn = document.getElementById("button");
    oBtn.onclick = function() {
        var userSelection, text;
        if (window.getSelection) { 
            //現(xiàn)代瀏覽器
            userSelection = window.getSelection();
        } else if (document.selection) { 
            //IE瀏覽器 考慮到Opera，應(yīng)該放在后面
            userSelection = document.selection.createRange();
        }
        console.log(userSelection);
        if (!(text = userSelection.text)) {
            text = userSelection;
        }
        alert(`你選擇中的文本是:${text},在文本中的位置為${userSelection.anchorOffset}-${userSelection.focusOffset}`);
    };
</script>
</html>

參考：https://www.zhangxinxu.com/wo...

2017年2月21日 08:51
編輯回答
凝雅
const allString = `dklasjdlkajslkdjalskjdlkasjdklasdhbasgduyquiw`;
const selectedString = `jdklas`;
const startIndex = allString.indexOf(selectedString);
const endStartIndex = startIndex >= 0 ? startIndex + selectedString.length : -1;

唯一的問題是如果選中的文字在全文里有重復(fù)的話就不行
比如全文為"我哈哈我哈哈我哈哈"
被選中的是"哈哈" 就不知道是哪一段了

2018年9月20日 08:21