javascript - 为什么这款荧光笔并不总是有效？-6ren

javascript - 为什么这款荧光笔并不总是有效？

转载作者：行者123 更新时间：2023-11-28 05:21:54

为什么我的荧光笔有这么多错误？首先，选择文本，然后选择一种颜色使选区变粗。但是，有时它不这样做，有时它会这样做。另外，我只希望该文本是粗体，而不是同一短语的每个实例。例如，如果您突出显示 Hello，则所有 Hello 都将变为粗体。我只希望选择的 Hello 加粗。 我该如何解决这个问题？

 $("#actual_verse").mouseup(function() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    
    if (/\S/.test(text)) {
      new_text = "<div id='color_div'>"+text+"</div>";
      
          $(".boxes").click(function() {
  var title = $(this).attr("title");
  var reg = new RegExp(text,"g");
   $('#actual_verse').html($('#actual_verse').html().replace(reg,'<strong>'+text+'</strong>'));
  document.getElementById('tooltip').style.display = 'none';
});
  
        
   // Tool Tip
  
var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1= document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2= document.createRange();
rel2.selectNode(document.getElementById('cal2'));
window.addEventListener('mouseup', function () {
    if (!sel.isCollapsed) {
        debugger;
        var r = sel.getRangeAt(0).getBoundingClientRect();
        var rb1 = rel1.getBoundingClientRect();
        var rb2 = rel2.getBoundingClientRect();
        ele.style.top = (r.bottom - rb2.top)*100/(rb1.top-rb2.top) + 'px'; //this will place ele below the selection
        ele.style.left = (r.left - rb2.left)*100/(rb1.left-rb2.left) + 'px'; //this will align the right edges together

        //code to set content

        ele.style.display = 'block';
    }
});

  // End of Tool Tip
  
  }
  
    
  });

/* Tool Kit */

#tooltip {
    position:absolute;
    display:none;
    border:grey solid 1px;
    background: #373737;
    padding: 5px;
    border-radius: 3px;
}
#cal1{
    position:absolute;
    height:0px;
    width:0px;
    top:100px;
    left:100px;
    overflow:none;
    z-index:-100;
}
#cal2{
    position:absolute;
    height:0px;
    width:0px;
    top:0;
    left:0;
    overflow:none;
    z-index:-100;
}

.boxes {
  width: 15px;
  height: 15px;
  cursor: pointer;
  display: inline-block;
  margin-right: 2px;
  position: relative;
  top: 3px;
}

#blue_box {
  background: #AAF6FF;
}

#green_box {
  background: #D6FFAA;
}

#orange_box {
  background: #FFBF98;
}

#purple_box {
  background: #D7D5FC;
}

#red_box {
  background: #FF9B9F;
}

#yellow_box {
  background: #FFF8AA;
}


/* End of Tool Kit */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse'> Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here </span>
<div id='cal1'>&nbsp;</div>
<div id='cal2'>&nbsp;</div>
<div id='tooltip'> <div id='blue_box' class='boxes' title='Blue'></div> <div id='green_box' class='boxes' title='Green'></div> <div id='orange_box' class='boxes' title='Orange'></div> <div id='purple_box' class='boxes' title='Purple'></div> <div id='red_box' class='boxes' title='Red'></div> </div> <br> <br>

最佳答案

一个很有趣的问题。尝试使用 Rangy。 Download zip file from Git .在调用 MyHighlight.toggleSelection() 之前，请小心自己弄乱 Range 和 Selection(调用它时，确保选择在浏览器中可见)。

这是简化版(对“script”标签进行了更改，还添加了“*.highlight”样式)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="rangy-master/external/log4javascript.js"></script>
<script type="text/javascript" src="rangy-master/src/core/core.js"></script>
<script type="text/javascript" src="rangy-master/src/core/dom.js"></script>
<script type="text/javascript" src="rangy-master/src/core/domrange.js"></script>
<script type="text/javascript" src="rangy-master/src/core/wrappedrange.js"></script>
<script type="text/javascript" src="rangy-master/src/core/wrappedselection.js"></script>
<script type="text/javascript" src="rangy-master/src/modules/rangy-classapplier.js"></script>

<script type="text/javascript">

    var MyHighlight;

    rangy.addInitListener(function(rangy) {
        MyHighlight = rangy.createClassApplier("highlight", true);
    });

    $( document ).ready(function() {


            $(".boxes").mousedown(function() {
                    MyHighlight.toggleSelection();
                    document.getElementById('tooltip').style.display = 'none';

            });

            $("#actual_verse").mouseup(function() {


                        var ele = document.getElementById('tooltip');
                        ele.style.display = 'block';


      });



    });





</script>
<style>

        /* Tool Kit */

    #tooltip {
        position:absolute;
        display:none;
        border:grey solid 1px;
        background: #373737;
        padding: 5px;
        border-radius: 3px;
    }
    #cal1{
        position:absolute;
        height:0px;
        width:0px;
        top:100px;
        left:100px;
        overflow:none;
        z-index:-100;
    }
    #cal2{
        position:absolute;
        height:0px;
        width:0px;
        top:0;
        left:0;
        overflow:none;
        z-index:-100;
    }

    .boxes {
      width: 15px;
      height: 15px;
      cursor: pointer;
      display: inline-block;
      margin-right: 2px;
      position: relative;
      top: 3px;
    }

    #blue_box {
      background: #AAF6FF;
    }

    #green_box {
      background: #D6FFAA;
    }

    #orange_box {
      background: #FFBF98;
    }

    #purple_box {
      background: #D7D5FC;
    }

    #red_box {
      background: #FF9B9F;
    }

    #yellow_box {
      background: #FFF8AA;
    }

        /* Tool Kit */

    #tooltip {
        position:absolute;
        display:none;
        border:grey solid 1px;
        background: #373737;
        padding: 5px;
        border-radius: 3px;
    }
    #cal1{
        position:absolute;
        height:0px;
        width:0px;
        top:100px;
        left:100px;
        overflow:none;
        z-index:-100;
    }
    #cal2{
        position:absolute;
        height:0px;
        width:0px;
        top:0;
        left:0;
        overflow:none;
        z-index:-100;
    }

    .boxes {
      width: 15px;
      height: 15px;
      cursor: pointer;
      display: inline-block;
      margin-right: 2px;
      position: relative;
      top: 3px;
    }

    #blue_box {
      background: #AAF6FF;
    }

    #green_box {
      background: #D6FFAA;
    }

    #orange_box {
      background: #FFBF98;
    }

    #purple_box {
      background: #D7D5FC;
    }

    #red_box {
      background: #FF9B9F;
    }

    #yellow_box {
      background: #FFF8AA;
    }


    *.highlight {
        font-weight: bold;
        background-color:#ff0000;
    }


</style>
</head>
<body>
<span id='actual_verse'> Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here </span>
<div id='cal1'>&nbsp;</div>
<div id='cal2'>&nbsp;</div>
<div id='tooltip'> <div id='blue_box' class='boxes' title='Blue'></div> <div id='green_box' class='boxes' title='Green'></div> <div id='orange_box' class='boxes' title='Orange'></div> <div id='purple_box' class='boxes' title='Purple'></div> <div id='red_box' class='boxes' title='Red'></div> </div> <br> <br>
</body>
</html>