I’m trying to surround selected text which are contained in multiple text nodes with span tags using the surroundContents method of a range object but it only works if the selection is completely contained within a single text node. So I thought about breaking up the range into multiple ranges at the locations where two HTML elements meet, use the surroundContents to surround the text I want, then combine the ranges together into a single range.
The problems I’m facing are I don’t know how to breakup the range and make sure the breaks take place at the right locations. Not only that but aside from Firefox I don’t think Chrome and other browsers support combining multiple ranges into a single range. If anyone has done this before please point me in the right direction, thanks.