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

Question

我正在接收一条输入信息，其中有一个指向图像的URL (例如:嘿，请查看这张照片：https://images-ext-2.discordapp.net/external/ZtV5K3UA1NBZx2HrP4-FrjGlbN713w7FTYdCfacgLZo/https/i.imgur.com/9ttsJot.jpg?width=431&height=498)。然后，我试图把这条信息和粗体字隔离开来：(例如:嘿，看看这张照片：)，这样我就有了一个纯粹的网址。

我找到了一些代码来检查它是否是一个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与消息的其余部分隔离开来。

Answer 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'));

​

具有多个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 at https://discordapp.net'));

​

Answer 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

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

​