Как выделенный текст обернуть в тэг?

$(document).on("mouseup", ".test", function() { 
  styliString(); 
}); 
 
function styliString() { 
  if (window.getSelection() == '') { 
    return false; 
  } 
  var range = window.getSelection().getRangeAt(0); 
  var selectionContents = range.extractContents(); 
  var span = document.createElement("span"); 
  span.appendChild(selectionContents); 
  span.setAttribute("class", "selected"); 
  span.style.backgroundColor = "yellow"; 
  span.style.color = "green"; 
  range.insertNode(span); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="test"> 
  select me selet me select me select me. select me selet me select me select me. select me selet me select me select me. select me selet me select me select me. select me selet me select me select me. select me selet me select me select me. 
</div>