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

Comments

Popular posts from this blog

Install deb package via Termux

How to Make Blogger Safelink Converter v3

List of weapon buff materials, effects and how it can be durango wild lands