如何修理这个荧光笔？

Question

为什么我的荧光笔如此错？首先，选择文本，然后选择其中一种颜色以使选择变为粗体。但是，有时它不会这样做，有时也会这样做。此外，我只希望该文本不是粗体而不是同一个短语的每个实例。例如，如果您突出显示 Hello ，则所有Hellos都将为粗体。我只希望选中的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'> 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>