Rangy True Cross-browser Serializer

Created: September 26, 2013
Last Modified: October 10, 2014
Subscribe to Internet Tips and Tools Feed
f Share
-
G+ Share
-
Tweet
-
in Share
-
P in it
-

I have created serialize/deserialize functions for Rangy that gives the same serialization between IE <= 8, IE 9, Webkit (Chrome, Safari, iPhone) and Firefox. It seems to work in the testing I have done. The two functions have comments explaining what they do. You can serialize a range in IE and it should be able to deserialize in Chrome, etc. It has worked so far in multiple pages that I have tested.

The functions count through all elements on the page or in the rootNode provided and skips the elements that are not compatible between the browsers or that have an emtpy innerHTML. The incompatible elements are title tags and comment tags and some tags with empty innerHTML.

The serialized range that is returned is seperated by commas and contains this data: startCharacter, endCharacter, startElement, endElement, startTextNode, endTextNode. So 0,26,333,333,0,0 would be the 0th or 1st character hightlighted to the 26th character highlighted, in the 333 HTML element (not counting incompatible elements) starting and ending in the first text node in the element (or text node 0). dlc_b

Download

Download
rangy-cb-serializer.js
Downloaded 0 times.
This script is provided for free but please consider making a donation to help with server costs and other expenses.

Use as follows:

cb_serializeRange(Range range[,Element rootNode])

For example:

	selection = rangy.getSelection(); 
	if(selection.rangeCount > 0) 
		range = selection.getRangeAt(0);
	var serial = cb_serializeRange(range, document.getElementById('container'));

will return a serial of the range starting from the 'container' element.

cb_deserializeRange(String cb_serializedRange[, Element rootNode])

For example:

	
	range = cb_deserializeRange("0,26,333,333,0,0", document.getElementById('container'))

will return a rangy range based on the serial provided starting from the 'container' element.
Back to www.seabreezecomputers.com
Subscribe to Internet Tips and Tools Feed        

User Comments

There are 1 comments.

Displaying first 50 comments.

1. Posted By: Alejandro Micheloud - - January 12, 2014, 3:28 am
Thanks, works great in almost browsers. Have a problem with FF 26 but i'm finding a solution.