如何使用 JavaScript 回调函数检测文本区域中的 url？

Question

如何使用 JavaScript 检测文本区域中的 url？使用 Facebook，您可以添加一个网址，一旦您完成粘贴/输入，它就会检测该地址。这怎么能做到呢？我对回调函数等做了很多研究，但想知道如何检测实际的 url？

Answer 1

如果您使用 jQuery，最简单的方法是使用 $.change()。

假设您有一个表单字段：

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

现在您可以将更改事件绑定到它，同时查明它是否是有效的 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
    }
});

然后您将拥有一个检查 url 并返回布尔值的函数。请注意，我从此处获取此内容

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

免责声明：我尚未测试任何 JavaScript，但这应该能让您很好地了解如何实现这一目标。

Answer 2

只需处理 onkeyup 或类似事件，然后搜索与正则表达式匹配的文本区域的值。没有特殊的回调来捕获诸如“用户在文本区域中编写了链接”之类的事件:-) 因此您必须捕获现有事件并自行处理。

Answer 3

上一个答案中的正则表达式并不匹配所有可能的 URL，因为仅当它们以 ftp、http 或 https 开头时才会被检测到，因此 example.com 或 www.example.com 不会被发现。

此外，每次按下按键时都会进行验证，因此如果您编写像 example.com 这样的 url，它会先检测 example.co，然后检测 example。 com 如果您使用它来获取额外信息（例如获取找到的 URL 的 META），这可能会很糟糕。

setTimeout() 和 clearTimeout() 有助于减少验证频率

请参阅：
当用户完成输入而不是按键时运行javascript函数？

---

这里是我最终得到的代码：

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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>Lorem ipsum dolor sit amet, example.com consectetur adipiscing elit. Mauris at massa quis www.example.com metus sagittis sollicitudin. Donec posuere, enim quis tincidunt varius,  http://example.com nibh lorem vulputate massa, sed cursus lacus justo at ante. http://www.example.com</textarea>

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

---

如果您需要获取所有 URL，您可以使用此函数，它返回包含所有可用 URL 的数组：

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;
}

Answer 4

<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://'))
}