如何从 Javascript 中的字符串中分离出 URL？答案

【问题标题】：How to isolate a URL from a string in Javascript?如何从 Javascript 中的字符串中分离出 URL？
【发布时间】：2021-07-26 19:35:53
【问题描述】：

我正在输入一条输入消息，其中包含一个指向图像的 URL（例如：嘿，看看这张照片：https://images-ext-2.discordapp.net/external/ZtV5K3UA1NBZx2HrP4-FrjGlbN713w7FTYdCfacgLZo/https/i.imgur.com/9ttsJot.jpg?width=431&height=498）。然后，我尝试接收该消息并将其隔离为 [粗体字] :（例如：嘿，看看这张照片：https://images-ext-2.discordapp.net/external/ZtV5K3UA1NBZx2HrP4-FrjGlbN713w7FTYdCfacgLZo/https/i.imgur.com/9ttsJot.jpg?width=431&height=498），这样我就只有一个纯 URL。

我找到了一些代码来检查它是否是一个 url：

if(new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?").test(Msg.content)){}

但我无法获取消息并将 URL 与消息的其余部分隔离。

【问题讨论】：

欢迎来到 StackOverflow，您能否展示一个带有 URL 的文本示例，以明确您想要实现的目标？目前你有两次相同的网址，这无助于解释。

标签： javascript url

【解决方案1】：

用空格分割字符串（使用String#split的用户）并使用Array#filter获取所有匹配URL正则表达式的单词：

var regex = new RegExp('(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})');
function boldURLs(s){
  return s.split(" ").filter(e => regex.test(e));
}

console.log(boldURLs('Hey check out this photo : https://images-ext-2.discordapp.net/external/ZtV5K3UA1NBZx2HrP4-FrjGlbN713w7FTYdCfacgLZo/https/i.imgur.com/9ttsJot.jpg?width=431&height=498'));

有多个网址：

var regex = new RegExp('(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})');
function boldURLs(s){
  return s.split(" ").filter(e => regex.test(e));
}

console.log(boldURLs('Hey check out this photo : https://images-ext-2.discordapp.net/external/ZtV5K3UA1NBZx2HrP4-FrjGlbN713w7FTYdCfacgLZo/https/i.imgur.com/9ttsJot.jpg?width=431&height=498 at https://discordapp.net'));

【讨论】：

【解决方案2】：

使用str.match(regex)，您可以获得所有匹配项的数组（在本例中为 URL）。从那里您可以直接使用它们或替换原始字符串...

let str = document.querySelector('.content').innerText
let re = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?", "g");
let urls = str.match(re);
console.log(urls)

urls.forEach(u => {
  let isimg = false;
  let imgext = ['.jpg', '.jpeg', '.gif', '.png', '.bmp', '.webp'];
  imgext.forEach(i => {
    if (u.toLowerCase().includes(i)) isimg = true;
  });
  let t = isimg ? 'this image' : 'this link';
  str = str.replaceAll(u, `<a href="${u}">${t}</a>`)
});

document.querySelector('.content').innerHTML = str

&lt;p class='content'&gt;Hey check out https://images-ext-2.discordapp.net/external/ZtV5K3UA1NBZx2HrP4-FrjGlbN713w7FTYdCfacgLZo/https/i.imgur.com/9ttsJot.jpg?width=431&amp;height=498&lt;/p&gt;

【讨论】：