highlighting selected text in chrome/safari

Question

I want to highlight selected text (in chrome/safari). The problem is that I can hightlight text when the selected text is from a single html tag. THe problem is that when a user selects text that is across multiple html tags, then the code disturbs the layout and also does not highlight text well. Please try to select text from mid of paragraph1 to mid of paragraph 2 or from paragraph2 and list items you will see the bug.

Here is my complete code

<!DOCTYPE html> 
<html> 
    <head> 
    <title>bug test</title> 
    <script type="text/javascript">
        //get html of the selected area
        //============
        function getSelectionHTML() {
            var userSelection;
            if (window.getSelection) {
                // W3C Ranges
                userSelection = window.getSelection ();
                var range = document.createRange ();
                range.setStart (userSelection.anchorNode, userSelection.anchorOffset);
                range.setEnd (userSelection.focusNode, userSelection.focusOffset);

                var clonedSelection = range.cloneContents ();
                var div = document.createElement ('div');
                div.appendChild (clonedSelection);
                return div.innerHTML;
            } else if (document.selection) {
                // Explorer selection, return the HTML
                userSelection = document.selection.createRange ();
                return userSelection.htmlText;
            } else {
                return '';
            }
        }

        function addNote(){
            var str= getSelectionHTML();
            //if the str is not starting with <
            if(str[0] != '<'){
                str = '<span style="background-color: #ff0000;">'+str+'</span>';
            }
            else{
                //alert('Please select a single line or paragraph');
                ///<[a-zA-Z]+[1-6]?/
                var reg = new RegExp(/<[a-zA-Z]+[1-6]?/g);
                var ma = str.match(reg);    //matched araay
                if(ma){
                    for(var i=0;i<ma.length;i++){
                        str = str.replace(ma[i], ma[i] + ' style="background-color: #ff0000;"');
                    }
                }
            }
            document.documentElement.contentEditable="true";
            document.execCommand ("insertHTML", false, str);
            document.documentElement.contentEditable="false";


            return;
        }
    </script>
</head> 
<body> 
    <input type="button" value="Execute" onclick="addNote()" />
    <p>
        Lorem ipsum lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm<br />
        Lorem ipsum lorem ipusm <span style="text-decoration: underline;">lorem ipusm lorem</span> ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm<br />
        Lorem ipsum lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm<br />        
    </p>
    <div>
        Lorem ipsum lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm<br />
        Lorem ipsum lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm lorem ipusm<br />        
    </div>
    <ul>
        <li>This is a sample list item</li>
        <li>This is a sample list item</li>
        <li>This is a sample list item</li>
    </ul>
</body>
</html>

Here's how to select text enter image description here

Here is after clicking execute button enter image description here

Have you considered applying highlighting to individual elements that you encounter? — Gagandeep Singh, Jan 20 '12 at 10:18
I've answered several similar question on SO. Here's one: http://stackoverflow.com/a/3224513/96100 — Tim Down, Jan 20 '12 at 10:24
the problem is when u select text like I have selected above. It automatically adds a tag in the selected text. See what u r getting at var str= getSelectionHTML(); after selecting/executing. — coure2011, Jan 20 '12 at 10:26

highlighting selected text in chrome/safari

0 Answers0