Checking if selected text is a link or not

Question

I have a contenteditable div where the user is able to type text, select it and then add a link to it (by clicking a button). They can then remove the link by hovering over the text and clicking another button.

Currently, both buttons (link and unlink) display. Is it possible to have the unlink button hidden and when the user selects some text inside the div, it checks if the text has a link:

If so, the link button will hide and the unlink button will appear. They can then click the unlink button to remove the link

If not, the link button will stay as it is.

<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/

You could use the selected text and use a regex to verify it's a link and then change the property of the unlink to a non-hidden. I think that should work. — selten98, May 21 '16 at 10:43
Unfortunately, contenteditable element doesn't support `onselect` event so it would be hard to handle this behaviour. This is the first thing you'd have to handle, before checking if selection is a link or not http://stackoverflow.com/a/8443541/1414562 — A. Wolff, May 21 '16 at 10:49
Do you want something like this [http://jsbin.com/mahiqiy/edit?js,output](http://jsbin.com/mahiqiy/edit?js,output) — Garvit Mangal, May 21 '16 at 11:46
@GarvitMangal Hi, thanks for responding. That's exactly what I want, except that the link button should disappear when the unlink button appears. — The Codesee, May 21 '16 at 11:48
@GarvitMangal Also, I noticed that if someone deselects the text they selected _(which has a link)_, the unlink button doesn't disappear. — The Codesee, May 21 '16 at 11:50
@TheCodesee Maybe this better suit your needs (only tested on chrome): https://jsfiddle.net/b1wdd8c7/1/ (you need to write and select at least on letter in contenteditable to see behaviour). Only issue i see is if you makes a link, then click outside contenteditable, the unlink button is still displayed — A. Wolff, May 21 '16 at 12:02
@A.Wolff That's another interesting idea too. _Sorry, it may just me being fussy_, but there seems to be an empty space where the link button should of been when the unlink button appears. — The Codesee, May 21 '16 at 12:10
@GarvitMangal Sorry to ask you again, but just one more thing... after they've added the link to the text, could the unlink button appear straight away? — The Codesee, May 21 '16 at 12:35
@TheCodesee See this [http://jsbin.com/sipuki/edit?js,output](http://jsbin.com/sipuki/edit?js,output) — Garvit Mangal, May 21 '16 at 12:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112574/discussion-between-the-codesee-and-garvit-mangal). — The Codesee, May 21 '16 at 12:54

score 1 · Accepted Answer · answered May 21 '16 at 14:04

You can use selectstart event listener on your div along with mouseup event.

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>

Thank you very much again, _we finally got there in the end!_ — The Codesee, May 21 '16 at 14:05

Checking if selected text is a link or not

1 Answers1