Question

我想突出显示所选文字（在chrome / safari中）。问题是，当所选文本来自单个html标记时，我可以高亮显示文本。问题在于，当用户选择跨多个html标签的文本时，代码会扰乱布局，也不会很好地突出显示文本。请尝试从段落1的中间到段落2的中间或从段落2中选择文本，并列出项目，您将看到该错误。

这是我的完整代码

<!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>

以下是选择文字的方法 enter image description here

点击执行按钮后 enter image description here

突出显示chrome / safari中的选定文本

0 个答案: