如何根據文本選擇位置來定位div

Question

假設我選擇了一些文本。我想要一個<div>出現在所選文本的開頭。

到目前爲止我的代碼來跟蹤所選文本：

$(document).ready(function() { 
 
    
 
    $("#actual_verse").mouseup(function() { 
 
    var text = ""; 
 
    if (window.getSelection) { 
 
     text = window.getSelection().toString(); 
 
    } else if (document.selection && document.selection.type != "Control") { 
 
     text = document.selection.createRange().text; 
 
    } 
 
    
 
    if (/\S/.test(text)) { 
 
     alert(text); 
 
    } 
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id='actual_verse'> A justo sit aut sit sed. Wisi a cras sed. Feugiat mus nulla sagittis proin, feugiat accumsan turpis neque, velit nec odio bibendum, cum dui mi turpis interdum, aptent risus vestibulum eu vitae sed. Nulla facilisis, id quis cubilia vel suscipit, fermentum ante aliquam nunc. Scelerisque lacinia, ut molestie dui libero arcu elit nec, faucibus tenetur maecenas sit ipsum rutrum. Non amet erat non sit quis, nonummy magna elit integer in sed in, suspendisse quis velit blandit, interdum quam dui mollis vestibulum elementum, urna donec eros eget. Mauris aliquam montes a, sem est sed, eveniet lacus nibh, donec ornare sit, aptent sit rutrum gravida. Wisi et amet lobortis. </span>

現在如何做一個<div>出現在所選文本的開始？

Answer 1

最簡單的方式：

https://jsfiddle.net/1mjhsypk/

警報之前添加text = '<div>'+text+'</div>';。

Answer 2

如果要放置一個div，其中選擇開始，你可以做這樣的事情：

$(document).ready(function() { 
 
    $('.conttext').mouseup(function() { 
 
    var highlight = window.getSelection(); 
 
    var spn = '<span class="highlight">' + highlight + '<div class="mydiv"></div></span>'; 
 
    var text = $('.conttext').text(); 
 
    $('.conttext').html(text.replace(highlight, spn)); 
 
    }); 
 
});

.highlight { 
 
    position: relative; 
 
} 
 
.mydiv { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: gold; 
 
    z-index: -1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="conttext">How hard can it be to achieve this here and now. Will it be difficult or can it be done with great simplicity</div>