Automatically Detect External URLs and Make Link In JS
This tutorial provides JavaScript code that automatically detect url on the page and make link. The regex helps to detect valid URLs in a page or string.
Problems
We have crawled data from third part website that ll have several paragraphs of text, in a user profile description or a message sent between users.
We need parse that paragraphs and automatically detect all the URLs within that text.
Regex: Automatically Detect URLs and Convert into Link
We’ll use regex expression that help find urls and convert into link.
The Regex:
let reg_ex = /(https?:\/\/)?[\w-~]+(.[\w-~]+)+(\/[\w-~@:%])(#[\w-])?(\?[^\s])?/gi;
Find all Urls
We’ll find all URLs from paragraphs. We’ll use the match method of the string along with the regular expression to detect the URLs in text. The below method will provide the list of the URLs in the array.
function detectURLs(content) { var reg_ex = /(https?:\/\/)?[\w-~]+(.[\w-~]+)+(\/[\w-~@:%])(#[\w-])?(\?[^\s])?/gi; return content.match(reg_ex) }
Convert Urls into Link
We’ve all URLs in an array, Let’s convert all URLs into clickable link. We’ll use the replace method of the string package and that method will be used to create a HTML anchor tag in the text.
function replaceURLs(content) { if(!content) return; var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g; return content.replace(urlRegex, function (url) { var hyperlink = url; if (!hyperlink.match('^https?:\/\/')) { hyperlink = 'http://' + hyperlink; } return '<a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a>' }); }
Example 2:
I have found one more javascript code that extract urls and return link.
function urlify(text) { var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g; //var urlRegex = /(https?:\/\/[^\s]+)/g; return text.replace(urlRegex, function(url,b,c) { var url2 = (c == 'www.') ? 'http://' +url : url; return '<a href="' +url2+ '" target="_blank">' + url + '</a>'; }) }
Using linkifyjs npm package
This library on NPM looks like it is pretty comprehensive https://www.npmjs.com/package/linkifyjs
Linkify is a small yet comprehensive JavaScript plugin for finding URLs in plain-text and converting them to HTML links. It works with all valid URLs and email addresses.
How To Install
Install from the command line with NPM
npm install linkifyjs
Import into your JavaScript with require
const linkify = require('linkifyjs');
As ES modules
import * as linkify from 'linkifyjs';
You can also include as in script tag:
Example:
Let’s create simple to extract urls and emails:
linkify.find("For help with GitHub.com, please email support@github.com");
Output:
[ { type: "url", value: "GitHub.com", isLink: true, href: "http://GitHub.com", start: 14, end: 24, }, { type: "email", value: "support@github.com", isLink: true, href: "mailto:support@github.com", start: 39, end: 57, }, ];
References:
Originally published at https://www.js-tutorials.com on February 4, 2023.