Automatically Detect External URLs and Make Link In JS

Parvez Alam
2 min readFeb 4

--

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:

https://linkify.js.org/docs/linkifyjs.html

Originally published at https://www.js-tutorials.com on February 4, 2023.

--

--

Parvez Alam

Hey, I am Parvez Alam. A software developer since 2009. I love learning and sharing knowledge. https://www.phpflow.com/