How to apply rounded borders to highlight/selection

Not perfect but it’s working: http://jsfiddle.net/coma/9p2CT/ Remove the real selection ::selection { background-color: transparent; } Add some styles span.highlight { background: #ADD6FF; } span.begin { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } span.end { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } pre.merge-end > span:last-child { border-bottom-right-radius: 0; } pre.merge-end + pre > span:last-child { border-top-right-radius: 0; } pre.merge-begin > … Read more

Converting Range or DocumentFragment to string

So, how to get the string of the html of a Range or DocFrag? Contrary to the other responses, it is possible to directly turn a DocumentFragment object into a DOMString using the XMLSerializer.prototype.serializeToString method described at https://w3c.github.io/DOM-Parsing/#the-xmlserializer-interface. To get the DOMString of a Range object, simply convert it to a DocumentFragment using either of … Read more

How can I get the DOM element which contains the current selection?

The following will return the container element of the start or end boundary of the current selection, using the boolean isStart to specify whether you want the start or end boundary. It will work in most mainstream browsers. Add feature tests for more robustness. function getSelectionBoundaryElement(isStart) { var range, sel, container; if (document.selection) { range … Read more

selectionStart and selectionEnd in contenteditable element

Try this, it returns the selected text, no matter if it’s contentEditable or not. function GetSelectedText() { if (document.getSelection) { // all browsers, except IE before version 9 var sel = document.getSelection(); // sel is a string in Firefox and Opera, // and a selectionRange object in Google Chrome, Safari and IE from version 9 … Read more