如何在Javascript中找到选择div的文本开头和结尾位置？

Question

这个问题可能类似于

How to find the selection text beginning and end positions in Javascript?

但它有点不同。

我有这样的div -

<div class="text-block title">
   ve <i><u>ri</u> <b>t</i>us</b> anything anything hi hello bla bla
</div>

我想要做的是，如果用户选择此文本 -

然后我想得到所选文本的开头和结尾的索引（对于这个条件4,17 ）。

有什么办法吗？

提前感谢您的帮助..

Answer 1

有一种方法，但首先添加一个＆＃34; id＆＃34;请你的文字：

<div class="text-block title" id="text">
    ve <i><u>ri</u> <b>t</i>us</b> anything anything hi hello bla bla
</div>



$("#text").select(function(){       
    selectedText = document.getSelection();
    var index =  getIndex(selectedText , this.innerHTML );
    console.log("index: "+index.start+" , "+index.end;
});

//this function was writed by me, so...
var getIndex = function( wA ,wB){
    var a =  wA.length;
    var b = wB.length;
    var d = b-a;
    var that ={};
    if(a<=b){
        for(var i=0;i<=d;i++){
            var c = "";
            for(var j=0;j<wA.length;j++){
                c+=wB.charAt(j+i);
            }
            if(wA.toUpperCase()==c.toUpperCase()){
                that.start = i;
                that.end = i+j;
                return that;
            }
        }
    }
}

这就是全部，检查并尝试，如果你发现错误告诉我，谢谢;）

Answer 2

它可以做得更简单！ ：）

$("textarea").select(function(e) {
	console.log(e.target.selectionStart);
  console.log(e.target.selectionEnd);
});

//fiddle: https://jsfiddle.net/Jorrex/upsopjqw/

textarea {
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
  Hi Hello Vi Veritas Vanitas Sora Roxas Rike Kairi Mickey Donald Goofy Ventus Aqua Terra Eraqus Xehanort
  
</textarea>