テキストボックス（JavaScript）内でクリックされた単語の位置を取得

Question

複数の文章を含むテキストボックスがあります。単語をクリックすると、このテキストボックスに単語の位置を取得する必要があります。

実際には、コードはテキストエリアからテキスト全体を取得し、別のテキストエリアに書き込みます。私はクリックした人物（または単語）の特定の位置を得ることに苦労しています。

単語/文字をクリックする前にテキストをコピーするだけです。

\t var themaintextarea = document.getElementById('textarea'); 
 
\t themaintextarea.addEventListener('click', replace_sentence); 
 
\t function replace_sentence(e){ 
 
\t \t var themaintext = document.getElementById("textarea").innerHTML; 
 
    //alert(thereplace); 
 
    document.getElementById("curent_sentence").value = themaintext; 
 
    theselection = window.getSelection(); 
 
    var therange = theselection.getRangeAt(0); 
 
    var sometext = therange.toString().trim(); 
 
    alert(sometext); 
 
    
 
\t } \t

<textarea id="curent_sentence"></textarea> 
 

 
<div id="textarea" contenteditable>I <span>like</span> apples. I <span>like</span> apples. 
 
<br> 
 
I <span>like</span> apples.</div>

Answer 1

EDITED：単語がクリックする前に単語を選択するための相続人はフィドル。注：これにスパンは使用されていません。 https://jsfiddle.net/Lnkav5ca/5/

私はあなたが探しているものを理解したと思う。 https://jsfiddle.net/Lnkav5ca/1/すべてのクリック可能な単語をクラスに入れ、そのクラスにイベントリスナーを追加します。単語がクリックされると、テキストボックスに挿入されます。

var themaintextarea = document.getElementsByClassName('clickable'); 
for (var i = 0; i < themaintextarea.length; i++) { 
themaintextarea[i].addEventListener('click', replace_sentence); 
} 
function replace_sentence(e){ 
console.log(e); 
    var themaintext = e.target.innerHTML 
//alert(thereplace); 
document.getElementById("curent_sentence").value = themaintext; 
theselection = window.getSelection(); 
var therange = theselection.getRangeAt(0); 
var sometext = therange.toString().trim(); 
//alert(sometext); 

}