Собственно моя попытка:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, alias cum voluptatem pariatur quisquam nemo minus quasi eum dolores distinctio saepe nam facilis esse quae vitae, eos sed a, sapiente.</p>
<script>
document.addEventListener('mouseup', function(event) {
var sel = window.getSelection(), rng, elem;
if ( event.which != 1 || !sel.toString().length ) return;
elem = document.createElement('span');
elem.style.backgroundColor = 'blue';
rng = document.createRange();
rng.setStart(sel.anchorNode, sel.anchorOffset);
rng.setEnd(sel.focusNode, self.focusOffset);
// rng.surroundContents(elem);
console.log( rng.toString() )
});
</script>
</body>
</html>
Но в Range почему-то пустота...