選択が空白の場合divを表示しない

Question

私はこのコードを使用しています。テキストが選択されていてスペースだけでなく、divも表示されます。しかし、私がdivで何もしないと、選択が削除されます。 DIVはまだそこにいる。 選択肢が空であるかどうかをチェックして、divを非表示にしますか？

$("#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)) { 
 
    // 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')); 
 

 
    if (!sel.isCollapsed) { 
 
     var r = sel.getRangeAt(0).getBoundingClientRect(); 
 
     var rb1 = rel1.getBoundingClientRect(); 
 
     var rb2 = rel2.getBoundingClientRect(); 
 
     //this will place ele below the selection 
 
     ele.style.top = (r.bottom - rb2.top) * 100/(rb1.top - rb2.top) + 'px'; 
 
     //this will align the right edges together 
 
     ele.style.left = (r.left - rb2.left) * 100/(rb1.left - rb2.left) + 'px'; 
 
     //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; 
 
    -webkit-touch-callout: none; /* iOS Safari */ 
 
    -webkit-user-select: none; /* Chrome/Safari/Opera */ 
 
    -khtml-user-select: none; /* Konqueror */ 
 
    -moz-user-select: none;  /* Firefox */ 
 
    -ms-user-select: none;  /* Internet Explorer/Edge */ 
 
    user-select: none;   /* Non-prefixed version, currently 
 
            not supported by any browser */ 
 

 
} 
 

 
#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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id='actual_verse' class='context'>Lorem ipsum dolor sit amet, doctus expetendis no vel. At vis doming viderer prompta. Ut vis consul atomorum pericula, an sed sonet suscipit lobortis. Eos tale atqui iriure ne, eos in delenit corpora, nec laudem everti ei.</span> 
 
<div id='cal1'>&nbsp;</div> 
 
<div id='cal2'>&nbsp;</div> 
 
<div id='tooltip'> 
 
    <div id='blue_box' class='boxes' title='blue_mark'></div> 
 
    <div id='green_box' class='boxes' title='green_mark'></div> 
 
    <div id='yellow_box' class='boxes' title='yellow_mark'></div> 
 
    <div id='orange_box' class='boxes' title='orange_mark'></div> 
 
    <div id='purple_box' class='boxes' title='purple_mark'></div> 
 
    <div id='red_box' class='boxes' title='red_mark'></div> 
 
</div>

Answer 1

あなたはこれを行うことができます：それは働いていません

document.getElementById("divId").style.display=(/\S/.test(text))?"block":"none";