JQuery Tutorial Auto Hyperlinking Plaintext URL
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML element.
HTML Links - Syntax
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
Problem: How to Auto Convert Plaintext URL (http://example.net) to hyperlinked URL (<a href="http://example.net/" rel="external nofollow noreferrer">example.net</a>) Using jQuery/JavaScript ?
Let's begun:now iam using this codes (jQuery):
// Auto Hyperlinker
$('#feed').ready(function(){ //parent container
// Get each div
$('.content').each(function(){ //contents container
// Get the content
var str = $(this).html();
// Set the regex string
var regex = /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/ig
// Replace plain text links by hyperlinks
var replaced_text = str.replace(regex, "<a href='$1' target='_blank'>$1</a>");
// Echo link
$(this).html(replaced_text);
});
});
Description:
('#feed') = is an ID parent of contents container
Example:
<div id="feed">
<div class="content">
</div></div>
('.content') = is an class container of your contents.
Example:
<div class="content">
<p>hello world. This is an example of my article</p>
...
..
</div>
This Demonstration:
Hey visit us at http://www.laelitenetwork.com
Check out http://8elite.com and follow us
Look ma! no links http://en.8elite.com
Or See this full codes on: JsFiddle