检查所选文本是否为链接答案

【问题标题】：Checking if selected text is a link or not检查所选文本是否为链接
【发布时间】：2016-05-21 10:25:41
【问题描述】：

我有一个内容可编辑的 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/

【问题讨论】：

您可以使用选定的文本并使用正则表达式来验证它是一个链接，然后将取消链接的属性更改为非隐藏。我认为这应该可行。
不幸的是，contenteditable 元素不支持onselect 事件，因此很难处理这种行为。这是您必须处理的第一件事，在检查选择是否为链接之前stackoverflow.com/a/8443541/1414562
你想要这样的http://jsbin.com/mahiqiy/edit?js,output
@GarvitMangal 您好，感谢您的回复。这正是我想要的，只是当取消链接按钮出现时链接按钮应该消失。
@GarvitMangal 另外，我注意到如果有人取消选择他们选择的文本（有链接），取消链接按钮不会消失。

标签： jquery html anchor contenteditable

【解决方案1】：

您可以在div 上使用selectstart 事件侦听器以及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>

【讨论】：

再次感谢您，我们终于到了！