選択されたテキストがリンクであるかどうかを確認する

Question

私は、ユーザがテキストを入力し、それを選択してからボタンをクリックすることでリンクを追加できるcontentedit divを持っています。次に、テキストの上にマウスを移動して別のボタンをクリックすると、リンクが削除されます。

現在、両方のボタン（リンクとリンク解除）が表示されます。アンリンクボタンが隠され、ユーザはdivの内側にいくつかのテキストを選択したときにテキストがリンクを持っているならば、それはチェックしていすることが可能です：

• その場合は、リンクボタンが非表示になりますとリンク解除]ボタンが表示されます。リンクを解除するには、リンク解除ボタンをクリックしてください。

• リンクボタンはそのままです。

  <button type="button" class="center" id="link">Link</button> 
  <button type="button" class="center" id="unlink">Unlink</button> 
  <div style="border: 1px solid;" contenteditable> 
  
  <script> 
  $('#link').click(function() { 
  var linkURL = prompt("Enter the URL for this link:", "http://"); 
  document.execCommand("CreateLink", false, linkURL); 
  updateInput() 
  }); 
  
  $('#unlink').click(function() { 
  document.execCommand("UnLink", false, null); 
  updateInput() 
  }); 
  </script> 
  

JsFiddle：https://jsfiddle.net/yw66s03e/

Answer 1

あなたはmouseupイベントと一緒にあなたのdivにselectstartイベントリスナーを使用することができます。

CODE：

$("#unlink").fadeOut(); 
 
$('#link').click(function() { 
 
    var linkURL = prompt("Enter the URL for this link:", "http://"); 
 
    document.execCommand("CreateLink", false, linkURL); 
 
    $("#unlink").fadeIn(); 
 
    $("#link").fadeOut(); 
 
// updateInput(); 
 
}); 
 

 
$('#unlink').click(function() { 
 
    document.execCommand("UnLink", false, null); 
 
    $("#unlink").fadeOut(); 
 
    $("#link").fadeIn(); 
 
// updateInput(); 
 
}); 
 

 
$('div').on('selectstart', function() { 
 
    
 
    $("#unlink").fadeOut(); 
 
    $("#link").fadeIn(); 
 
     $(document).one('mouseup', function() { 
 
      var itemLink = itemIsLinked(); 
 
      if(typeof itemLink === "object" && itemLink[0] === true){ 
 
       $("#unlink").fadeIn(); 
 
       $("#link").fadeOut(); 
 
      }   
 
     }); 
 
}); 
 

 
$("body").on("keyup","div",function(e){ 
 
    if($("#unlink").css("display") != "none"){ 
 
    $("#unlink").fadeOut(); 
 
    $("#link").fadeIn(); 
 
    } 
 
}); 
 

 
function itemIsLinked(){ 
 
    if(window.getSelection().toString() != ""){ 
 
     var selection = window.getSelection().getRangeAt(0); 
 
     if(selection){ 
 
      if (selection.startContainer.parentNode.tagName === 'A' || selection.endContainer.parentNode.tagName === 'A') { 
 
       return [true, selection]; 
 
      } else { return false; } 
 
     } else { return false; } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<button type="button" class="center" id="link">Link</button> 
 
<button type="button" class="center" id="unlink">Unlink</button> 
 

 
<div style="border: 1px solid;" contenteditable>