Проверка, является ли выделенный текст ссылкой или нет

Question

У меня есть контент-доступный div, где пользователь может набрать текст, выбрать его и затем добавить к нему ссылку (нажав кнопку). Затем они могут удалить ссылку, наведя курсор на текст и нажав другую кнопку.

В настоящее время отображаются обе кнопки (связь и разблокировка). Можно ли иметь кнопку UNLINK скрытые и когда пользователь выбирает некоторый текст внутри 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

Вы можете использовать selectstart слушателя событий на вашем div вместе с mouseup событием.

КОД:

$("#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>