How to overcome multiple selection issue

Question

I have a sample paragraph text in p tag. If i select some text in the paragraph. I am changing its text color to green from black and wrapping it in span tag adding a class selected for it. But i am able to select the text that is already selected. I don't want the selected text to be selected again.

I have given sample code in the link: http://jsfiddle.net/2w35p/81/

function getSelectedText() {
  t = (document.all) ? document.selection.createRange().text : document.getSelection();

  return t;
}

$('body').mouseup(function() {
  var selection = getSelectedText();
  var selection_text = selection.toString();
  var span = document.createElement('SPAN');
  span.textContent = selection_text;
  span.className = "selectedText"
  var range = selection.getRangeAt(0);
  range.deleteContents();
  range.insertNode(span);
});

span {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged..
  <p>

Answer 1

In short, you simply add event trigger or triggers within the span to control how selection should be done. You didn't specify what happens if the selection ends within the span, but I believe you can figure that part out.

var span = document.createElement('SPAN');
span.textContent = selection_text;
span.className = "selectedText";
span.onselectstart = ()=> !!window.getSelection().empty(); //new
span.onmouseover = ()=> !!window.getSelection().empty(); //new
if (selection_text) { //new
  var range = selection.getRangeAt(0);
  range.deleteContents();
  range.insertNode(span);
} //new

Answer 2

On mousedown, check for an existing selectedText element, and replace it with its text node:

$('body').mousedown(function() {
  var selected = document.querySelector('.selectedText');
  if(selected && selected.childNodes.length) {
    selected.parentNode.replaceChild(selected.childNodes[0], selected);
  }
});

To prevent issues with the browser's default select behavior, add this code to the end of your mouseup() function:

if(window.getSelection().empty) {
  window.getSelection().empty();
} else if(window.getSelection().removeAllRanges) {
  window.getSelection().removeAllRanges();
}

Snippet

function getSelectedText() {
  t = (document.all) ? document.selection.createRange().text : document.getSelection();

  return t;
}

$('body').mousedown(function() {
  var selected = document.querySelector('.selectedText');
  if(selected && selected.childNodes.length) {
    selected.parentNode.replaceChild(selected.childNodes[0], selected);
  }
});

$('body').mouseup(function(){
  var selection = getSelectedText();
  var selection_text = selection.toString();

  var span = document.createElement('SPAN');
  span.textContent = selection_text;
  span.className = "selectedText"
  var range = selection.getRangeAt(0);
  range.deleteContents();
  range.insertNode(span);

  if(window.getSelection().empty) {
    window.getSelection().empty();
  } else if(window.getSelection().removeAllRanges) {
    window.getSelection().removeAllRanges();
  }
});

html, body {
  height: 100%;
}

span {
  color: red;  /* changed to red for demo purposes */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.. 
<p>

Answer 3

Trigger the possible inverse of the mouseup event when you over or enter. Check if there's a span tag return false.

Answer 4

// How do I add a span around the selected text?

Certainly not dynamically. Just use a string...

var selection_text = '<span class="selectedText">'+selection.toString()+'</span>';