Munawwar · January 10, 2017 01:45 · visnup · Aug 24, 2012 · leonspok · Feb 16, 2013
diff --git a/test.html b/test.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<script type="text/javascript">
 		/*
 			This code is a IE8 (and below), polyfill for HTML5 Range object's startContainer,
 			startOffset, endContainer and endOffset properties.
 		*/
 		(function () {
 			function findTextNode(node, text) {
 				//Iterate through all the child text nodes and check for matches
 				//As we go through each text node keep removing the text value (substring) from the beginning of the text variable.
 				do {
 					if(node.nodeType==3) {//Text node
 						var find = node.nodeValue;
 						if (text.length > 0 && text.indexOf(find) === 0 && text !== find) { //text==find is a special case
 							text = text.substring(find.length);
 						} else {
 							//cosole.log(node.nodeValue);
 							return {node: node, offset: text.length}; //nodeInfo
 						}
 					} else if (node.nodeType === 1) {
 						var range = document.body.createTextRange();
 						range.moveToElementText(node);
 						text = text.substring(range.text.length);
 					}
 				} while ((node=node.nextSibling));
 				return null;
 			}

 			/**
 			 * @param {Boolean} startOfSelection Set to true to find the startContainer and startOffset,
 			 * else set to false (to find endContainer and endOffset).
 			 */
 			function getSelectionInfo(range, startOfSelection) {
 				if(!range) return null;
 				var rangeCopy = range.duplicate(), //Create two copies
 					rangeObj = range.duplicate();

 				rangeCopy.collapse(startOfSelection); //If true, go to beginning of the selection else go to the end.

 				var parentElement = rangeCopy.parentElement();
 				//If user clicks the input button without selecting text, then moveToElementText throws an error.
 				if (parentElement instanceof HTMLInputElement) {
 					return null;
 				}
 				//console.log(parentElement.nodeName); //Should return the parent.
 				/* However IE8- cannot have the selection end at the zeroth index of
 				 * the parentElement's first text node.
 				 */
 				rangeObj.moveToElementText(parentElement); //Select all text of parentElement
 				rangeObj.setEndPoint('EndToEnd', rangeCopy); //Move end point to rangeCopy

 				//rangeCopy.text gives you text from parentElement's first character upto rangeCopy.
 				//Now traverse through sibling nodes to find the exact Node and the selection's offset.
 				return findTextNode(parentElement.firstChild, rangeObj.text);
 			}

 			function getIERange() {
 				var range=window.document.selection.createRange(), //Microsoft TextRange Object
 					start = getSelectionInfo(range, true),
 					end = getSelectionInfo(range, false);
 				if (start && end) {
 					return {
 						commonAncestorContainer: range.parentElement(),
 						startContainer: start.node,
 						startOffset: start.offset,
 						endContainer: end.node,
 						endOffset: end.offset
 					};
 				}
 				return null;
 			}

 			if (!window.getSelection && window.document.selection) { //IE8-
 				window.getSelection = function () { //Gets the first range object
 					var range = getIERange();
 					return {
 						rangeCount: range ? 1 : 0,
 						getRangeAt: function () {
 							return range;
 						}
 					};
 				};
 			}
 		}());

 		function onBtnClick() {
 			var range=window.getSelection().getRangeAt(0);
 			if (range) {
 				console.log(range.startContainer.nodeValue.substr(range.startOffset));
 				console.log(range.startOffset);
 				console.log(range.endContainer.nodeValue.substr(0, range.endOffset));
 				console.log(range.endOffset);
 			}
 		}
 		</script>
 	</head>
 	<body>
 		<h3>Select some text and click the button</h3>
 		<pre>The quick brown fox <b>jumped</b> over the lazy dog</pre>
 		<input type="button" value="console.log current selection info" onclick="onBtnClick();" /><br/>
 		<br/>
 		Clicking the button above will print out the following:<br/>
 		<pre>console.log(range.startContainer.nodeValue.substr(range.startOffset));
 console.log(range.startOffset);
 console.log(range.endContainer.nodeValue.substr(0, range.endOffset));
 console.log(range.endOffset);</pre>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript">
	/*
	This code is a IE8 (and below), polyfill for HTML5 Range object's startContainer,
	startOffset, endContainer and endOffset properties.
	*/
	(function () {
	function findTextNode(node, text) {
	//Iterate through all the child text nodes and check for matches
	//As we go through each text node keep removing the text value (substring) from the beginning of the text variable.
	do {
	if(node.nodeType==3) {//Text node
	var find = node.nodeValue;
	if (text.length > 0 && text.indexOf(find) === 0 && text !== find) { //text==find is a special case
	text = text.substring(find.length);
	} else {
	//cosole.log(node.nodeValue);
	return {node: node, offset: text.length}; //nodeInfo
	}
	} else if (node.nodeType === 1) {
	var range = document.body.createTextRange();
	range.moveToElementText(node);
	text = text.substring(range.text.length);
	}
	} while ((node=node.nextSibling));
	return null;
	}

	/**
	* @param {Boolean} startOfSelection Set to true to find the startContainer and startOffset,
	* else set to false (to find endContainer and endOffset).
	*/
	function getSelectionInfo(range, startOfSelection) {
	if(!range) return null;
	var rangeCopy = range.duplicate(), //Create two copies
	rangeObj = range.duplicate();

	rangeCopy.collapse(startOfSelection); //If true, go to beginning of the selection else go to the end.

	var parentElement = rangeCopy.parentElement();
	//If user clicks the input button without selecting text, then moveToElementText throws an error.
	if (parentElement instanceof HTMLInputElement) {
	return null;
	}
	//console.log(parentElement.nodeName); //Should return the parent.
	/* However IE8- cannot have the selection end at the zeroth index of
	* the parentElement's first text node.
	*/
	rangeObj.moveToElementText(parentElement); //Select all text of parentElement
	rangeObj.setEndPoint('EndToEnd', rangeCopy); //Move end point to rangeCopy

	//rangeCopy.text gives you text from parentElement's first character upto rangeCopy.
	//Now traverse through sibling nodes to find the exact Node and the selection's offset.
	return findTextNode(parentElement.firstChild, rangeObj.text);
	}

	function getIERange() {
	var range=window.document.selection.createRange(), //Microsoft TextRange Object
	start = getSelectionInfo(range, true),
	end = getSelectionInfo(range, false);
	if (start && end) {
	return {
	commonAncestorContainer: range.parentElement(),
	startContainer: start.node,
	startOffset: start.offset,
	endContainer: end.node,
	endOffset: end.offset
	};
	}
	return null;
	}

	if (!window.getSelection && window.document.selection) { //IE8-
	window.getSelection = function () { //Gets the first range object
	var range = getIERange();
	return {
	rangeCount: range ? 1 : 0,
	getRangeAt: function () {
	return range;
	}
	};
	};
	}
	}());

	function onBtnClick() {
	var range=window.getSelection().getRangeAt(0);
	if (range) {
	console.log(range.startContainer.nodeValue.substr(range.startOffset));
	console.log(range.startOffset);
	console.log(range.endContainer.nodeValue.substr(0, range.endOffset));
	console.log(range.endOffset);
	}
	}
	</script>
	</head>
	<body>
	<h3>Select some text and click the button</h3>
	<pre>The quick brown fox <b>jumped</b> over the lazy dog</pre>
	<input type="button" value="console.log current selection info" onclick="onBtnClick();" /><br/>
	<br/>
	Clicking the button above will print out the following:<br/>
	<pre>console.log(range.startContainer.nodeValue.substr(range.startOffset));
	console.log(range.startOffset);
	console.log(range.endContainer.nodeValue.substr(0, range.endOffset));
	console.log(range.endOffset);</pre>
	</body>
	</html>