visnup · August 24, 2012 22:05
diff --git a/selection.js b/selection.js
 (function selectionPolyfill(window, document) {
  if (window.getSelection || !document.selection) return;

  // convert an IE TextRange to a W3C one
  function convert(range, startOrEnd) {
    var point = range.duplicate()
      , result = {};

    // point is either the start or end of the range
    point.collapse(startOrEnd);

    var span = document.createElement('span')
      , cursor = document.body.createTextRange()
      , parent = point.parentElement();

    // `point`'s `parentElement` is the first full-fledged element node above
    // us in the hierarchy. everything between its boundaries and `point` is an
    // inline element. insert an empty span inside the parent element and keep
    // moving it back until its gets to the left of `point`.
    parent.appendChild(span);
    cursor.moveToElementText(span);
    while (cursor.compareEndPoints('StartToStart', point) > 0 && span.previousSibling) {
      parent.insertBefore(span, span.previousSibling);
      cursor.moveToElementText(span);
    }

    // that means `span`'s `nextSibling` is point's text node container.
    result.container = span.nextSibling;

    // extend our cursor out from the beginning of `point`'s text node to
    // `point` and use the text length to find its offset.
    cursor.setEndPoint('EndToStart', point);
    result.offset = cursor.text.length;

    parent.removeChild(span);

    return result;
  }

  window.getSelection = function() {
    var range = document.selection.createRange()
      , start = convert(range, true)
      , end = convert(range, false);


    return {
      rangeCount: 1,
      getRangeAt: function() {
        return {
          commonAncestorContainer: range.parentElement(),
          startContainer: start.container,
          startOffset: start.offset,
          endContainer: end.container,
          endOffset: end.offset
        };
      }
    };
  };

 })(window, document);
diff --git a/test.html b/test.html
 <!DOCTYPE html>
 <html>
 	<head>
    <style type="text/css">
      #text { float: left; }
    </style>
 	</head>
 	<body>
    <div id="text">
 		Select some text:

    <p>
      `Twas brillig, and the slithy toves<br/>
      Did gyre and gimble in the wabe:<br/>
      All mimsy were the borogoves,<br/>
      And the mome raths outgrabe.
    </p>
    <p>
      "Beware the Jabberwock, my son!<br/>
      The jaws that bite, the claws that catch!<br/>
      Beware the Jubjub bird, and shun<br/>
      The frumious Bandersnatch!"
    </p>
    <p>
      He took his vorpal sword in hand:<br/>
      Long time the manxome foe he sought --<br/>
      So rested he by the Tumtum tree,<br/>
      And stood awhile in thought.
    </p>
    <p>
      And, as in uffish thought he stood,<br/>
      The Jabberwock, with eyes of flame,<br/>
      Came whiffling through the tulgey wood,<br/>
      And burbled as it came!
    </p>
    <p>
      One, two! One, two! And through and through<br/>
      The vorpal blade went snicker-snack!<br/>
      He left it dead, and with its head<br/>
      He went galumphing back.
    </p>
    <p>
      "And, has thou slain the Jabberwock?<br/>
      Come to my arms, my beamish boy!<br/>
      O frabjous day! Callooh! Callay!'<br/>
      He chortled in his joy.
    </p>
    <p>
      `Twas brillig, and the slithy toves<br/>
      Did gyre and gimble in the wabe;<br/>
      All mimsy were the borogoves,<br/>
      And the mome raths outgrabe.
    </p>

    </div>

    <div id="output"></div>

    <script type="text/javascript" src="selection.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
 		<script type="text/javascript">
      $(function() {
        $(document).on('mouseup', function() {
          var selection = window.getSelection();
          if (selection.rangeCount > 0) {
            var range = selection.getRangeAt(0)
              , ancestor = range.commonAncestorContainer
              , output = [
                '<br/>rangeCount: ',
                selection.rangeCount,

                '<br/>commonAncestorContainer: ',
                ancestor.tagType == 3 ? 'TEXT' : ancestor.tagName,

                '<br/>startContainer: ',
                range.startContainer.data,
                '<br/>startOffset: ',
                range.startOffset,

                '<br/>endContainer: ',
                range.endContainer.data,
                '<br/>endOffset: ',
                range.endOffset
              ];


            $('#output').html(output.join(' '));
          }
        });
      });
 		</script>
 	</body>
 </html>
	(function selectionPolyfill(window, document) {
	if (window.getSelection \|\| !document.selection) return;

	// convert an IE TextRange to a W3C one
	function convert(range, startOrEnd) {
	var point = range.duplicate()
	, result = {};

	// point is either the start or end of the range
	point.collapse(startOrEnd);

	var span = document.createElement('span')
	, cursor = document.body.createTextRange()
	, parent = point.parentElement();

	// `point`'s `parentElement` is the first full-fledged element node above
	// us in the hierarchy. everything between its boundaries and `point` is an
	// inline element. insert an empty span inside the parent element and keep
	// moving it back until its gets to the left of `point`.
	parent.appendChild(span);
	cursor.moveToElementText(span);
	while (cursor.compareEndPoints('StartToStart', point) > 0 && span.previousSibling) {
	parent.insertBefore(span, span.previousSibling);
	cursor.moveToElementText(span);
	}

	// that means `span`'s `nextSibling` is point's text node container.
	result.container = span.nextSibling;

	// extend our cursor out from the beginning of `point`'s text node to
	// `point` and use the text length to find its offset.
	cursor.setEndPoint('EndToStart', point);
	result.offset = cursor.text.length;

	parent.removeChild(span);

	return result;
	}

	window.getSelection = function() {
	var range = document.selection.createRange()
	, start = convert(range, true)
	, end = convert(range, false);


	return {
	rangeCount: 1,
	getRangeAt: function() {
	return {
	commonAncestorContainer: range.parentElement(),
	startContainer: start.container,
	startOffset: start.offset,
	endContainer: end.container,
	endOffset: end.offset
	};
	}
	};
	};

	})(window, document);
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	#text { float: left; }
	</style>
	</head>
	<body>
	<div id="text">
	Select some text:

	<p>
	`Twas brillig, and the slithy toves<br/>
	Did gyre and gimble in the wabe:<br/>
	All mimsy were the borogoves,<br/>
	And the mome raths outgrabe.
	</p>
	<p>
	"Beware the Jabberwock, my son!<br/>
	The jaws that bite, the claws that catch!<br/>
	Beware the Jubjub bird, and shun<br/>
	The frumious Bandersnatch!"
	</p>
	<p>
	He took his vorpal sword in hand:<br/>
	Long time the manxome foe he sought --<br/>
	So rested he by the Tumtum tree,<br/>
	And stood awhile in thought.
	</p>
	<p>
	And, as in uffish thought he stood,<br/>
	The Jabberwock, with eyes of flame,<br/>
	Came whiffling through the tulgey wood,<br/>
	And burbled as it came!
	</p>
	<p>
	One, two! One, two! And through and through<br/>
	The vorpal blade went snicker-snack!<br/>
	He left it dead, and with its head<br/>
	He went galumphing back.
	</p>
	<p>
	"And, has thou slain the Jabberwock?<br/>
	Come to my arms, my beamish boy!<br/>
	O frabjous day! Callooh! Callay!'<br/>
	He chortled in his joy.
	</p>
	<p>
	`Twas brillig, and the slithy toves<br/>
	Did gyre and gimble in the wabe;<br/>
	All mimsy were the borogoves,<br/>
	And the mome raths outgrabe.
	</p>

	</div>

	<div id="output"></div>

	<script type="text/javascript" src="selection.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
	$(document).on('mouseup', function() {
	var selection = window.getSelection();
	if (selection.rangeCount > 0) {
	var range = selection.getRangeAt(0)
	, ancestor = range.commonAncestorContainer
	, output = [
	'<br/>rangeCount: ',
	selection.rangeCount,

	'<br/>commonAncestorContainer: ',
	ancestor.tagType == 3 ? 'TEXT' : ancestor.tagName,

	'<br/>startContainer: ',
	range.startContainer.data,
	'<br/>startOffset: ',
	range.startOffset,

	'<br/>endContainer: ',
	range.endContainer.data,
	'<br/>endOffset: ',
	range.endOffset
	];


	$('#output').html(output.join(' '));
	}
	});
	});
	</script>
	</body>
	</html>