How Can I Detect and Convert URLs to Hyperlinks in JavaScript?

Detect URLs in Text with JavaScript

Detecting URLs can be challenging due to the flexibility of the URL format. To address this, we create a custom function that replaces any detected URL with an HTML hyperlink.

Regex for URL Detection

Finding URLs requires an accurate regular expression. While the provided "kLINK_DETECTION_REGEX" is comprehensive, it can lead to false positives. For this demonstration, we'll use the simpler regex: /(https?://¹ )/g.

String Replacement

Once we have a regex, we can replace the URLs with hyperlinks using the replace() method. The replacement string can be constructed using string concatenation:

return text.replace(urlRegex, '<a href="' + url + '">' + url + '</a>')

Alternatively, we can use the $1 backreference:

return text.replace(urlRegex, '<a href=""></a>')

Example Usage

Given the input text: 'Find me at http://www.example.com and also at http://stackoverflow.com', the urlify function will produce the following HTML:

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>

---

1. s ↩

The above is the detailed content of How Can I Detect and Convert URLs to Hyperlinks in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!