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/">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



Or See this full codes on: JsFiddle

Subscribe to receive free email updates:

0 Response to "JQuery Tutorial Auto Hyperlinking Plaintext URL"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.