jquery - How can you detect a url in a text area using a javascript callback function? - Stack Overflow

admin管理员组

文章数量:1340299

How can you detect a url in a textarea with JavaScript? With Facebook you can add a url and it will detect the address as soon as you finished pasting/typing it. How can this be done? I've done a lot of research on callback functions, etc. but am wondering how I can detect an actual url?

How can you detect a url in a textarea with JavaScript? With Facebook you can add a url and it will detect the address as soon as you finished pasting/typing it. How can this be done? I've done a lot of research on callback functions, etc. but am wondering how I can detect an actual url?

• javascript
• jquery
• facebook
• url
• callback

Share Improve this question Follow asked Jul 23, 2011 at 21:36 John DoeJohn Doe 3,6721515 gold badges6565 silver badges112112 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

If you are using jQuery the easiest way is with $.change().

Say you have a form field:

<input id="myField" type="text"/>

Now you can tie a change event to it, and at the same time find out if its a valid url:

$('#myField').keyup(function() {
    if(isUrl($(this).val()){
       //Show the url in an alert box
       alert($(this).val());
    }else{
       //do something if its not a url
    }
});

Then you would have a function that checks for a url and returns a boolean value. Note, I took this from here

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

Disclaimer: I haven't tested any of the javascript, but this should give you a good idea of how you could acplish this.

Just handle onkeyup or similar event and then search the value of the textarea matching the regular expression. There's no special callback to catch event like "user wrote a link in a textarea" :-) So you have to catch existing events and handle it yourself.

The regex on previous answer doesn't match all possible URL because they are detected only if they begin with ftp, http or https, so example. or www.example. would not be found.

Also, the verification is made everytime you press a key so if you're writing an url like example., it will detect example.co then example. which could be bad if you use it for extra information (like getting META of found URL).

setTimeout() and clearTimeout() help to reduce the frequency of verification

See : Run javascript function when user finishes typing instead of on key up?

---

Here the code I end up with :

var typingTimer;
var doneTypingInterval = 1000;

$(function() {
  // Check textarea on load
  checkTextareaUrl();

  // Check textarea on key pressed
  $('textarea').keyup(function() {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(checkTextareaUrl, doneTypingInterval);
  });
});

function checkTextareaUrl()
{
  var url = checkUrl($('textarea').val());

  if (url)
  {
    // Action when an url is found
    $('.url').text('Url found: '+ url);
  }
  else
  {
    // Action when an url is found
    $('.url').text('No url found');
  }
}

function checkUrl(string)
{
  var regex = /(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,63}(:[0-9]{1,5})?(\/.*)?/;
  return regex.test(string) ? string.match(regex)[0] : false;
}

textarea {
  width: 500px;
  height: 100px;
}

.url { font-weight: 700; }

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>Lorem ipsum dolor sit amet, example. consectetur adipiscing elit. Mauris at massa quis www.example. metus sagittis sollicitudin. Donec posuere, enim quis tincidunt varius,  http://example. nibh lorem vulputate massa, sed cursus lacus justo at ante. http://www.example.</textarea>

<div class="url"></div>

---

If you need to get all URLs, you can use this function which return an array with all available URLs :

function checkUrls(string)
{
  var regex = /(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,63}(:[0-9]{1,5})?(\/.*)?/g;
  return regex.test(string) ? string.match(regex) : false;
}

<textarea id="Testing" onkeypress="detectUrlExists" onblur="detectUrl" />


function detectUrlExists (event) {
    let urlIndex = event.target.value.match(/https:\/\//)?.index
    if (urlIndex) {
        //add lines to proceed after detecting url exists
    }
}

function detectUrl () {
    let val = document.getElementById('Testing').value
    let urls = val.split(' ').filter(el => el.startsWith('https://'))
}

本文标签： jqueryHow can you detect a url in a text area using a javascript callback functionStack Overflow