使用 JavaScript 检测文本中的 URL

javascript regex url

2022-08-30 01:19:14

有没有人对检测一组字符串中的URL有建议？

arrayOfStrings.forEach(function(string){
  // detect URLs in strings and do something swell,
  // like creating elements with links.
});

更新：我最终使用此正则表达式进行链接检测...显然是几年后。

kLINK_DETECTION_REGEX = /(([a-z]+:\/\/)?(([a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel|local|internal))(:[0-9]{1,5})?(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&amp;]*)?)?(#[a-zA-Z0-9!$&'()*+.=-_~:@/?]*)?)(\s+|$)/gi

完整的助手（具有可选的车把支持）位于要点#1654670。

答案 1

首先，您需要一个与url匹配的良好正则表达式。这很难做到。请参阅此处，此处和此处：

...几乎任何东西都是有效的URL。有一些标点符号规则可以将其拆分。没有任何标点符号，您仍然拥有有效的 URL。

仔细检查RFC，看看是否可以构造“无效”的URL。规则非常灵活。

例如，是有效的 URL。路径为。一个非常愚蠢的文件名，但一个有效的文件名。:::::":::::"

此外，是一个有效的 URL。netloc（“主机名”）是。路径为。再一次，愚蠢。也有效。此 URL 规范化为等效的 URL。/////"""///""///"

类似的东西是完全有效的。愚蠢但有效。"bad://///worse/////"

无论如何，这个答案并不是为了给你最好的正则表达式，而是一个证明如何使用JavaScript在文本中做字符串包装。

好吧，让我们只用这个：/(https?:\/\/[^\s]+)/g

同样，这是一个糟糕的正则表达式。它将有许多误报。但是，对于此示例来说，这已经足够好了。

function urlify(text) {
  var urlRegex = /(https?:\/\/[^\s]+)/g;
  return text.replace(urlRegex, function(url) {
    return '<a href="' + url + '">' + url + '</a>';
  })
  // or alternatively
  // return text.replace(urlRegex, '<a href="$1">$1</a>')
}

var text = 'Find me at http://www.example.com and also at http://stackoverflow.com';
var html = urlify(text);

console.log(html)

// html now looks like:
// "Find me at <a href="http://www.example.com">http://www.example.com</a> and also at <a href="http://stackoverflow.com">http://stackoverflow.com</a>"

所以总而言之，试试：

$$('#pad dl dd').each(function(element) {
    element.innerHTML = urlify(element.innerHTML);
});

答案 2

以下是我最终用作正则表达式的内容：

var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;

这不包括网址中的尾随标点符号。Crescent的功能就像一个魅力:)所以：

function linkify(text) {
    var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(urlRegex, function(url) {
        return '<a href="' + url + '">' + url + '</a>';
    });
}