如何檢測 JavaScript 字符串中的 URL 並將其轉換為鏈接?

碼道人 2021-08-15 20:42:01 阅读数:769

本文一共[544]字,预计阅读时长:1分钟~
javascript 字符串 字符 url

有時,我們必須在 JavaScript 字符串中查找 URL。

在本文中,我們將了解如何在 JavaScript 字符串中查找 URL 並將它們轉換為鏈接。

我們可以創建自己的函數,使用正則錶達式來查找 URL。

例如,我們可以這樣寫:

const urlify = (text) => {
const urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, (url) => {
return `<a href="${url}>${url}</a>`;
})
}
const text = 'Find me at http://www.example.com and also at http://stackoverflow.com';
const html = urlify(text);
console.log(html)

我們創建了接受 text 字符串的 urlify 函數。

在函數中,我們優化了 urlRegex 變量,該變量具有用於匹配url的regex。

我們檢查 httphttps

然後我們查找斜杠和文本。

正則錶達式末尾的 g 標志讓我們可以搜索字符串中的所有 URL。

然後我們用 urlRegex 調用 text.replace 並在回調中返回一個帶有匹配 url 的字符串。

因此,當我們用 text 調用 urlify 時,我們得到:

'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>'

我們可以使用更複雜的正則錶達式使 URL 搜索更精確。

例如,我們可以這樣寫:

const urlify = (text) => {
const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
return text.replace(urlRegex, (url) => {
return `<a href="${url}>${url}</a>`;
})
}
const text = 'Find me at http://www.example.com and also at http://stackoverflow.com';
const html = urlify(text);
console.log(html)

我們搜索 httphttpsftp 和文件url。

我們還在模式中包含 : 、字母、與號和下劃線。


翻譯自javascript.plainenglish.io,作者:John Au-Yeung

版权声明:本文为[碼道人]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/08/20210815204156351a.html