Javascript 选择开始和选择结束返回不准确的索引（即）

要求用户能够突出显示文本的各个部分

例如，如果文本区域包含“01234567”，则用户应该能够突出显示“1357”，而不突出显示“0246”

selectionStart

和

selectionEnd

返回的索引较大、随机且不准确，与目标索引相差不超过3个数字

如果

selectionStart

和

selectionEnd

按预期工作，则下面的代码应该工作

$("#P85_30DAY").attr("contenteditable","true");
$("#P85_30DAY").css("postition","absolute");
var selStartArray = [];
var selStartArrayMin = [];
var selEndArray = [];
var selEndArrayMax = [];
function ModifySelection () {            
            var textarea = document.getElementById("P85_30DAY");
            if ('selectionStart' in textarea) {                    
                if (textarea.selectionStart != textarea.selectionEnd) { 
                      var selTextStart = textarea.selectionStart;
                      var selTextEnd = textarea.selectionEnd;
                      var P8530DAY = $("#P85_30DAY").val();
                      var len =  P8530DAY.length;
                      var nextSelStartArray = "-1";
                      selStartArray.push(selTextStart);
                      selStartArrayMin.push(selTextStart);
                      selEndArray.push(selTextEnd);
                      selEndArrayMax.push(selTextEnd);
                      selStartArrayMin.sort(function(a, b){return a-b});
                      selEndArrayMax.sort(function(a, b){return b-a});

text = "<span>" + textarea.value.substring (0, selStartArrayMin[0]);  
for (i = 0; i <= len; i++) {                                          
var indexVal = selStartArray.indexOf(i);                              
if (indexVal != -1){                                                  
text += "<span style='color:white;background-color:blue'>" + textarea.value.substring  (selStartArray[indexVal], selEndArray[indexVal]) + "</span>" ;  
for (k = i+1; k < len; k++) {                                         
var indexValB = selStartArray.indexOf(k);                             
if (indexValB != -1){                                                
var nextSelStartArray = textarea.value.substring (selEndArray[indexValB - 1], selStartArray[indexValB]);
}}
if (nextSelStartArray != -1){                                        
text += nextSelStartArray;                                           
nextSelStartArray = "-1";
k = len;                                             
}}}
text += textarea.value.substring (selEndArrayMax[0]) + "</span>";      

                 $("#P85_30DAY").empty();                   
                 $(text).appendTo("#P85_30DAY");                     
                 $("#P85_60DAY").val("Length: " + "\n" + len + "\n" + "SelStart Array: " + "\n" + selStartArray + "\n" + "SelEnd Array: " + "\n" + selEndArray);                
                }
            }                       
        }
//document.getElementById("P85_30DAY").onkeyup = ModifySelection;
document.getElementById("P85_30DAY").onmouseup = ModifySelection;
<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <textarea name="p_t07" class="textarea" id="P85_30DAY" style="width: 587px; height: 600px; font-size: 130%; position: relative;" contenteditable="true" maxlength="4000" rows="1" cols="80" wrap="virtual"></textarea>

<!-- end snippet -->


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $("#P85_30DAY").attr("contenteditable","true");
$("#P85_30DAY").css("postition","absolute");
var selStartArray = [];
var selStartArrayMin = [];
var selEndArray = [];
var selEndArrayMax = [];
function ModifySelection () {            
            var textarea = document.getElementById("P85_30DAY");
            if ('selectionStart' in textarea) {                    
                if (textarea.selectionStart != textarea.selectionEnd) { 
                      var selTextStart = textarea.selectionStart;
                      var selTextEnd = textarea.selectionEnd;
                      var P8530DAY = $("#P85_30DAY").val();
                      var len =  P8530DAY.length;
                      var nextSelStartArray = "-1";
                      selStartArray.push(selTextStart);
                      selStartArrayMin.push(selTextStart);
                      selEndArray.push(selTextEnd);
                      selEndArrayMax.push(selTextEnd);
                      selStartArrayMin.sort(function(a, b){return a-b});
                      selEndArrayMax.sort(function(a, b){return b-a});

text = "<span>" + textarea.value.substring (0, selStartArrayMin[0]);  
for (i = 0; i <= len; i++) {                                          
var indexVal = selStartArray.indexOf(i);                              
if (indexVal != -1){                                                  
text += "<span style='color:white;background-color:blue'>" + textarea.value.substring  (selStartArray[indexVal], selEndArray[indexVal]) + "</span>" ;  
for (k = i+1; k < len; k++) {                                         
var indexValB = selStartArray.indexOf(k);                             
if (indexValB != -1){                                                
var nextSelStartArray = textarea.value.substring (selEndArray[indexValB - 1], selStartArray[indexValB]);
}}
if (nextSelStartArray != -1){                                        
text += nextSelStartArray;                                           
nextSelStartArray = "-1";
k = len;                                             
}}}
text += textarea.value.substring (selEndArrayMax[0]) + "</span>";      

                 $("#P85_30DAY").empty();                   
                 $(text).appendTo("#P85_30DAY");                     
                 $("#P85_60DAY").val("Length: " + "\n" + len + "\n" + "SelStart Array: " + "\n" + selStartArray + "\n" + "SelEnd Array: " + "\n" + selEndArray);                
                }
            }                       
        }
//document.getElementById("P85_30DAY").onkeyup = ModifySelection;
document.getElementById("P85_30DAY").onmouseup = ModifySelection;    

这是文本区域的外观，具有正确的

selectionStart

和

selectionEnd

值

    <textarea name="p_t07" class="textarea" id="P85_30DAY" style="width: 587px; 
 height: 600px; font-size: 130%; margin-top: -431px; margin-left: -1340px;
 position: relative;" contenteditable="true" maxlength="4000" rows="1" cols="80" 
 wrap="virtual"><span>0<span style="color: white; background-color: 
 blue;">1</span>2<span style="color: white; background-color: 
 blue;">3</span>4<span style="color: white; background-color: 
 blue;">5</span>6<span style="color: white; background-color: blue;">7</span>
 </span></textarea>

01234567

我已经让它能够对多个跨距进行硬编码，但动态放置这些跨距是我面临的问题。在用户完成突出显示后，您计划如何使用它们？您是否会将带有多个突出显示的内容显示给不同的用户？您是否需要能够以编程方式处理选择？它必须在文本区域吗？突出显示将被保存，然后在以后显示。不同的用户应该能够看到亮点。除了突出显示，文本区域是Oracle Apex中最容易使用的。如果由于selectionStart和selectionEnd错误而无法正常工作，则必须重新处理多个页面，并将大量文本区域更改为div。

$("#P85_30DAY").attr("contenteditable","true");
$("#P85_30DAY").css("postition","absolute");
var selStartArray = [1,3,5,7];
var selStartArrayMin = [1,3,5,7];
var selEndArray = [2,4,6,8];
var selEndArrayMax = [2,4,6,8];
function ModifySelection () {            
            var textarea = document.getElementById("P85_30DAY");
            if ('selectionStart' in textarea) {                    
                      var textTest = "01234567";
                      var selTextStart = textarea.selectionStart;
                      var selTextEnd = textarea.selectionEnd;
                      var len =  textTest.length;
                      var nextSelStartArray = "-1";
                      //selStartArray.push(selTextStart);
                      //selStartArrayMin.push(selTextStart);
                      //selEndArray.push(selTextEnd);
                      //selEndArrayMax.push(selTextEnd);
                      selStartArrayMin.sort(function(a, b){return a-b});
                      selEndArrayMax.sort(function(a, b){return b-a});

text = "<span>" + textTest.substring (0, selStartArrayMin[0]);  
for (i = 0; i <= len; i++) {                                          
var indexVal = selStartArray.indexOf(i);                              
if (indexVal != -1){                                                  
text += "<span style='color:white;background-color:blue'>" + textTest.substring  (selStartArray[indexVal], selEndArray[indexVal]) + "</span>" ;  
for (k = i+1; k < len; k++) {                                         
var indexValB = selStartArray.indexOf(k);                             
if (indexValB != -1){                                                
var nextSelStartArray = textTest.substring (selEndArray[indexValB - 1], selStartArray[indexValB]);
}
if (nextSelStartArray != -1){                                        
text += nextSelStartArray;                                           
nextSelStartArray = "-1";
k = len;                                            
}}}}
text += textTest.substring (selEndArrayMax[0]) + "</span>";      

                 $("#P85_30DAY").empty();                   
                 $(text).appendTo("#P85_30DAY");                     
                 $("#P85_60DAY").val("Length: " + "\n" + len + "\n" + "SelStart Array: " + "\n" + selStartArray + "\n" + "SelEnd Array: " + "\n" + selEndArray);                
                }                     
        };
//document.getElementById("P85_30DAY").onkeyup = ModifySelection;
document.getElementById("P85_30DAY").onmouseup = ModifySelection;

    <textarea name="p_t07" class="textarea" id="P85_30DAY" style="width: 587px; 
 height: 600px; font-size: 130%; margin-top: -431px; margin-left: -1340px;
 position: relative;" contenteditable="true" maxlength="4000" rows="1" cols="80" 
 wrap="virtual"><span>0<span style="color: white; background-color: 
 blue;">1</span>2<span style="color: white; background-color: 
 blue;">3</span>4<span style="color: white; background-color: 
 blue;">5</span>6<span style="color: white; background-color: blue;">7</span>
 </span></textarea>