자바 스크립트에 의해 문장에서 선택한 문자열 오프셋 시작 및 오프셋 끝을 얻는 방법

Question

두 개가 있습니다. 하나는 아래 HTML 버전입니다.

<div class="data-sentence" onclick="setSentenceNo(28);"> 
    <p> 
    Statement of Advice for <span class="artemis_soa ano-subject" data-oristr="Joe" data-replaceid="tag_replace_6" data-hasqtip="7">&lt;NAME_1&gt;</span> and <span class="artemis_soa ano-subject" data-oristr="Black" data-replaceid="tag_replace_3" data-hasqtip="8">&lt;NAME_2&gt;</span>, 
    </p> 
</div> 

또 다른 하나는 평범한 텍스트입니다 (브라우저에서도 볼 수 있습니다).

Statement of Advice for <NAME_1> and <NAME_2>, 

그래서 내가 원하는 것은 사용자가 문자열을 선택하고 사용자가 선택한 문자열에 대해 오프셋 시작 및 오프셋 끝을 되돌릴 수있게하려는 것입니다. (또한 사용자가 예약 된 태그를 선택하도록 허용해서는 안됩니다.) 예를 들어

, 사용자 선택 문자열 '조언'는 offset_start = 13 offset_end = 19

당신의 도움에 대해 감사드립니다.

Answer 1

window.getSelection() 다음에 Selection 및 Range API를 사용하면 필요한 오프셋을 얻을 수 있습니다.

document.body.onmouseup = function() { 
 
    var selection = window.getSelection(); 
 
    var range = selection.getRangeAt(0); 
 
    console.log(range.startOffset, range.endOffset); 
 
};

<div><p>Statement of Advice for <span>&lt;NAME_1&gt;</span> and <span>&lt;NAME_2&gt;</span>,</p></div>