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

【问题标题】：How can you detect a url in a text area using a javascript callback function?如何使用 javascript 回调函数检测文本区域中的 url？
【发布时间】：2011-10-11 19:41:09
【问题描述】：

如何使用 JavaScript 检测文本区域中的 url？使用 Facebook，您可以添加一个 url，它会在您完成粘贴/输入后立即检测到该地址。如何才能做到这一点？我对回调函数等进行了大量研究，但想知道如何检测实际的 url？

【问题讨论】：

标签： javascript jquery facebook url callback

【解决方案1】：

只需处理onkeyup 或类似事件，然后搜索匹配正则表达式的文本区域的值。没有特殊的回调来捕捉“用户在文本区域中写了一个链接”这样的事件 :-) 所以你必须捕捉现有的事件并自己处理。

【讨论】：

onkeyup 会更好。这样，如果他们键入 example.com，您可以在最后一个“m”键被释放时捕捉到，而不是在按下下一个键时捕捉到。
好的，谢谢。为什么有人投反对票？为人们编写代码是我们的工作吗？我认为提示就足够了。

【解决方案2】：

如果您使用 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 并返回布尔值的函数。请注意，我是从here

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

免责声明：我没有测试过任何 javascript，但这应该让您对如何完成此操作有一个很好的了解。

【讨论】：

什么代表实际的url？例如，如果我想发出警报，我会说什么？ alert(\\WHAT HERE?\\);
不要对此使用 onchange 事件...它只会在模糊字段（离开它）或发送表单时触发。使用 onkeyup（见上一个答案）

【解决方案3】：

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

此外，每次按下键时都会进行验证，因此如果您正在编写像 example.com 这样的 URL，它将检测到 example.co 然后是 example.com，如果您将其用于额外信息（例如获取找到的 URL 的 META）。

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

见： Run javascript function when user finishes typing instead of on key up?

这是我最终得到的代码：

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

【讨论】：

【解决方案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://'))
}

【讨论】：