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.
Checkout Other tutorials:
- How To Open JavaScript Link in New Tab
- Convert srt to text with regex in JavaScript
- Iterating over a JavaScript Object
- Reading csv file using JavaScript and HTML5
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 = 'https://' + hyperlink; } return '<a href="' + hyperlink + '" target="_blank" rel="nofollow noopener">' + 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.') ? 'https://' +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 [email protected]");
Output:
[ { type: "url", value: "GitHub.com", isLink: true, href: "https://gitHub.com", start: 14, end: 24, }, { type: "email", value: "[email protected]", isLink: true, href: "mailto:[email protected]", start: 39, end: 57, }, ];