selection

HTML

<div id="wrapper">
<div id="boxes" class="clearfix">
    <div id="contribution" class="box">
        <div class="content">
            some lorem ipsum bla bla bla bla
            bla bla bla
            </div>
    </div>
    <div id="heading" class="box">
        <textarea id="heading-content"></textarea>
    </div>
    <div id="insights" class="box">

    </div>
</div>

</div>

CSS

#wrapper { text-align: right; direction: rtl; font-family: arial; font-size: 67%; }
.box {
    float: right;
    width: 30%;
    border: 1px solid #ccc;
    min-height: 300px;
}

.mark { background-color: yellow }

#contribution, 
#heading {
    border-left: 0;
}
#heading textarea:focus {
    border: 0;
    outline: 0;
}
#heading textarea {
    resize: none;
    width: 100%;
    border: 0;
    min-height: 150px;
    font-family: arial;
    font-size: 11px;
}


/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before,.clearfix:after
{
  content:"\0020";
  display:block;
  height:0;
  overflow:hidden;
}

.clearfix:after
{
  clear:both;
}

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix
{
  zoom:1;
}

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before,.clearfix:after
{
  content:"\0020";
  display:block;
  height:0;
  overflow:hidden;
}

.clearfix:after
{
  clear:both;
}

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix
{
  zoom:1;
}

JavaScript

$('#contribution .content').mouseup(function() {
    var selection = getSelected();
    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
        $('#heading-content').val(selection);
    }
    removeMarkers();
    var textWithMarkers = highlightSelected();
    this.blur();
    var el = $('#heading-content');
    el.focus();
    
     if (isIE()) {
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    } else {
        el.focus();
        var content = el.val();
        el.val('');
        el.val(content);
    }
    
});

function removeMarkers() {
    var el = $('#contribution .content');

    el.find('> span').each(function (i, v) {
        var self = $(this);
        self.before(self.html());
        self.remove();
    });
}

function getSelected() {
  if(window.getSelection) { return window.getSelection(); }
  else if(document.getSelection) { return document.getSelection(); }
  else {
    var selection = document.selection && document.selection.createRange();
    
    if(selection.text) { return selection.text; }
    return false;
  }
  return selection;
}

function highlightSelected() {
    var selection = getSelected();
    var range = selection.getRangeAt(0);
    var newNode = document.createElement("span");
    $(newNode).addClass('mark');
    range.surroundContents(newNode);

    return range;
}

function isIE() {
  return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
}