Question

如何使用JavaScript检测textarea中的网址？使用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的函数并返回一个布尔值。请注意，我是从here

获取的

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

免责声明：我没有测试过任何一个javascript，但是这应该会让你知道如何实现这个目标。

Answer 2

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

Answer 3

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

此外，每按一次键都会进行一次验证，因此，如果您编写的是example.com之类的网址，它将先检测到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;
}

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

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

4 个答案: