Javascript 在chrome/safari中突出显示选定文本_Javascript

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

javascript

Javascript 在chrome/safari中突出显示选定文本,javascript,Javascript,我想突出显示选定的文本（在chrome/safari中）。问题是，当所选文本来自单个html标记时，我可以高亮显示文本。问题是，当用户选择跨多个html标记的文本时，代码会干扰布局，也不会很好地突出显示文本。请尝试从第1段中间到第2段中间或从第2段中选择文本，并列出您将看到错误的项目这是我的完整代码 <!DOCTYPE html> <html> <head> <title>bug test</title>

我想突出显示选定的文本（在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>


错误测试
//获取所选区域的html
//============
函数getSelectionHTML（）{
var用户选择；
if（window.getSelection）{
//W3C系列
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.innerHTML；
}else if（文档选择）{
//浏览器选择，返回HTML
userSelection=document.selection.createRange（）；
返回userSelection.htmlText；
}否则{
返回“”；
}
}
函数addNote（）{
var str=getSelectionHTML（）；
//如果str不是以<
if（str[0]！='您是否考虑过对遇到的单个元素应用高亮显示？我已经回答了几个类似的问题。这里有一个问题：问题是当您像我上面选择的那样选择文本时。它会自动在所选文本中添加标记。选择/执行后，请参阅var str=getSelectionHTML（）；得到的结果。