Jquery - detect and get the url from text using jquery

Question

I have textarea and I want to detect when the user will finish TYPING or PASTING a url. I want to catch that url an send it to php.

I looked at many solutions from google, but they all seems to add a anchor tag around the link which I don't want to do.

I tried using this regexp I found in a solution on this website, but it did not work:

/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/

the problem with it is that as soon I type something like http://, it will automatically send that string only.

I don't want to write a regexp with finite list of TLDs. What ways can I archive this?

this is the code:

$(document).ready(function() {
    $('#write-post-textarea').keyup(function() {    
        if(isUrl($(this).val())){
           //Show the url in an alert box
           alert($(this).val());
        }else{
           //do something if its not a url
        }
    });     
    function isUrl(s) {
        //var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
        return regexp.test(s);
    }    
});

try to add code in keyup event that match last key as space or enter before validating url. — irfanmcsd
– irfanmcsd, Commented Aug 3, 2014 at 5:40

irfanmcsd · Accepted Answer · 2014-08-03 05:47:44Z

1

Use keyup event along with keycode validation to make sure enter or space button pressed before start validation.

$("#write-post-textarea").keyup(function (e) {
    if (e.which == 13 || e.which == 32) { // 32 may be for space bar click
        if(isUrl($(this).val())){
          //Show the url in an alert box
          alert($(this).val());
        }else{
          //do something if its not a url
        }
     }
});

answered Aug 3, 2014 at 5:47

irfanmcsd

6,5807 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Edward · Accepted Answer · 2014-08-03 05:41:02Z

I think the problem you have is that whenever you press a key it checks url once. So as soon as you type in something that matches the regexp it sends. You can try set a timer like this:

var timer;
$(document).ready(function() {
    $('#write-post-textarea').keyup(function() {
        var $this = $(this);
        clearTimeout(timer);
        setTimeout(function ()}
          if(isUrl($this.val())){
             //Show the url in an alert box
             alert($(this).val());
          }else{
             //do something if its not a url
          }
        }, 2000);
    });

    function isUrl(s) {
        //var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
        return regexp.test(s);
    }

});

So that timer will be clear when you are typing, and only run the code when you stop.

Collectives™ on Stack Overflow

Jquery - detect and get the url from text using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related