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
Look ma! no links http://en.8elite.com
Or See this full codes on: JsFiddle
Comments
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.