JavaScript如何实现鼠标选中文本改变选中区域颜色-职坐标

JavaScript如何实现鼠标选中文本改变选中区域颜色

沉沙 2018-09-05 来源：阅读 5163 评论 0

摘要：本篇教程介绍了JavaScript如何实现鼠标选中文本改变选中区域颜色，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

本篇教程介绍了JavaScript如何实现鼠标选中文本改变选中区域颜色，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

直接上demo：

<!DOCTYPE html>
<html>
<head>
    <title>Field selection demo</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<style>
  #trainPhase {
   border: 1px solid #ddd;
   padding: 10px;
  }
</style>
</head>
<body>
<div contentEditable="true" id="trainPhase">
  div test body. Please input content.
</div>

<button id="replace">replace selection</button>
<script>
  (function() {
   var $elem;

   $(‘#trainPhase‘).focus(function(){
    $elem = $(this);
   });

   // $(‘#get‘).on(‘click‘, function() {
   //  alert($elem.fieldSelection().text);
   //  window.console && console.log($elem.fieldSelection());
   // });

   $(‘#replace‘).on(‘click‘, function() {
    var selection_text = window.getSelection().toString();
    var childNodes = document.getElementById("trainPhase").childNodes;
    var range = window.getSelection().getRangeAt(0);
    var startOffset = range.startOffset;
    var endOffset = range.endOffset;
    if (childNodes.length == 1){
     var nodeText = childNodes[0].textContent.trim();
     var prefix = nodeText.substring(0, startOffset);
     var middle = ‘<span style="color:red;">‘ + nodeText.substring(startOffset, endOffset) + "</span>";
     var suffix = nodeText.substring(endOffset, nodeText.length);
     document.getElementById("trainPhase").innerHTML = prefix + middle + suffix;

    }

    if (childNodes.length > 1){
     if(range.startContainer == range.endContainer){
      for(var idx in childNodes){
       if (childNodes[idx] == range.startContainer ||
       childNodes[idx] == range.startContainer.parentNode){
        var nodeText = childNodes[idx].textContent;
        var prefix = nodeText.substring(0, startOffset);
        var middle = ‘<span style="color:red;">‘ + nodeText.substring(startOffset, endOffset) + "</span>";
        var suffix = nodeText.substring(endOffset, nodeText.length);
        $(childNodes[idx]).replaceWith( prefix + middle + suffix);
       }
      }
     }else{
      var isStart = false;
      var repalce_span = ""
      for(var idx in childNodes){
       if (childNodes[idx] == range.startContainer ||           childNodes[idx] == range.startContainer.parentNode){
        isStart = true;
        var nodeText = childNodes[idx].textContent;
        var prefix = nodeText.substring(0, startOffset);
        var suffix = ‘<span style="color:red;">‘ + nodeText.substring(startOffset, nodeText.length);
        repalce_span =  prefix + suffix;
        childNodes[idx].replaceWith("")
       }else if(childNodes[idx] == range.endContainer ||
       childNodes[idx] == range.endContainer.parentNode){
        isStart = false;
        var nodeText = childNodes[idx].textContent;
        var prefix = nodeText.substring(0, endOffset) + "</span>";
        var suffix = nodeText.substring(endOffset, nodeText.length);
        repalce_span += prefix + suffix
        $(childNodes[idx]).replaceWith(repalce_span);
        break;
       }else{
       if(isStart){
        repalce_span += childNodes[idx].textContent
        childNodes[idx].replaceWith("")
       }
       }
      }

     }
    }


   });
  }());
</script>
</body>
</html>