Home » Jquery » javascript – Multiple and Separate Text Selection Highlights within textarea Oracle Apex-Exceptionshub

javascript – Multiple and Separate Text Selection Highlights within textarea Oracle Apex-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have gotten to the point where I am able to highlight the text but I can only do one continuous highlight. My requirement is to be able to have multiple and separate highlights in one textarea.

Does anyone have any ideas on how to proceed?

$("#P85_30DAY").attr("contenteditable", "true");
$("#P85_30DAY").css("postition", "absolute");

function ModifySelection() {
  var textarea = document.getElementById("P85_30DAY");
  if ('selectionStart' in textarea) {
    // check whether some text is selected in the textarea
    if (textarea.selectionStart != textarea.selectionEnd) {
      //var newText = textarea.value.substring (0, textarea.selectionStart) + 
      //   "[start]" + textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd) + "[end]" +
      //  textarea.value.substring (textarea.selectionEnd);
      var opnSpan = '<span style="color:white;background-color:blue">';
      var clseSpan = '</span>';
      var begText = textarea.value.substring(0, textarea.selectionStart);
      var endText = textarea.value.substring(textarea.selectionEnd);
      // var selText = opnSpan + textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd) + clseSpan;
      var selText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);

      //$("#P85_30DAY").html("<span>" + begText + "<span style='color:white;background-color:blue'> " + selText + "</span>" + endText + "</span>"); //appears as text   
      // textarea.value = begText + selText + endText; //appears as text                    
      // $("#P85_30DAY").html(begText + $("<span style='color:white;background-color:blue'></span>").text(selText) + endText); appears as object
      //$("#P85_30DAY").val(begText + $("p").wrapInner("<span style='color:white;background-color:blue'></span>") + endText); appears as object
      $("#P85_30DAY").empty(); //works for one highlight
      $("<span>" + begText + "<span style='color:white;background-color:blue'>" + selText + "</span>" + endText + "</span>").appendTo("#P85_30DAY");
    }
  } else { // Internet Explorer before version 9
    // create a range from the current selection
    var textRange = document.selection.createRange();
    // check whether the selection is within the textarea
    var rangeParent = textRange.parentElement();
    if (rangeParent === textarea) {
      textRange.text = "[start]" + textRange.text + "[end]";
    }
  }
}

//document.getElementById("P85_30DAY").onkeyup = ModifySelection;
document.getElementById("P85_30DAY").onmouseup = ModifySelection;
<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>
How to&Answer: