In this tutorial we are going to discuss how to Convert URL Text Into Clickable HTML Links Using JavaScript. It is very easy to covert the URL text to clickable link and here we are converting the URL text to clickable link with the help of used regular expression validation.You May have been observed different links, while posting comments in various blogs and via. these links (Clickable links) you can easily redirect to another page. If the links displayed as a text, then no one will observe you comments and will not get attention from different blogger.
So, We have implemented this with the help of comment box, when use enter any link on textarea field and click on submit button, then it will covert and display text URL to clickable HTML Link.
Check out our blog archive on the topic if you’re looking to learn about Convert URL To Clickable Link Using PHP.
Let see the complete source to convert text URL to Clickable Link:
Index.php
Below code display the comment box and consists of validation code for comment box.
Lets check another simple code snippet to convert test URL to link:
So, We have implemented this with the help of comment box, when use enter any link on textarea field and click on submit button, then it will covert and display text URL to clickable HTML Link.
Check out our blog archive on the topic if you’re looking to learn about Convert URL To Clickable Link Using PHP.
Let see the complete source to convert text URL to Clickable Link:
Index.php
Below code display the comment box and consists of validation code for comment box.
- When the comment box is empty and user try to submit the comment then it will display the error message.
- When any URL provided as input in comment box and user try to submit the comment then it will display clickable link.
rel="stylesheet" type="text/css" href="design.css">
src="jquery.min.js">
$(document).ready(function() {
$("#submitform").on("click", function() {
var message = $('textarea').val();
if (message.length == "0") {
$(".errorMsg").show();
} else {
$("#display-results").prepend("" + linkify(message) + "");
$('textarea').val("");
}
});
});
function linkify(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
return text.replace(exp, "$1");
}Convert Text URLs into Links Using Javascript. id="mainbox">class="errorMsg">*Please enter the text.
type="button" class="button" id="submitform" value="Submit">id="display-results">
design.css
Consists of style sheet CSS file for comment box.
#mainbox{
width:500px;
padding:5px;
margin:0px auto;
border-radius: 5px;font-family: arial;
line-height: 16px;color: #333333; font-size: 14px;
background: #ffffff;rgba(200,200,200,0.7) 0 4px 10px -1px;
}
#display-results{
width:500px;
padding:5px;
margin:10px auto;
border-radius: 5px;font-family: arial;
line-height: 16px;color: #333333; font-size: 14px;
background: #ffffff;rgba(200,200,200,0.7) 0 4px 10px -1px;
}
#message{
border: 1px solid #d6d7da;
padding:4px;
background-color:#e5e5e5;
margin-top:10px;
}
textarea{
padding: 10px;
border: solid 1px #BDC7D8;
margin-bottom:3px;
}
.button {
background-color: #00BFFF ;
border-color: #3ac162;
font-weight: bold;
padding: 10px 10px;
color: #ffffff;
}
.errorMsg{
color: #cc0000;
margin-bottom: 5px;
display:none;
}
Lets check another simple code snippet to convert test URL to link:
type="text/javascript">
function linkify(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
return text.replace(exp, "$1");
}
var text = "welcome to skptricks : http://www.skptricks.com/" ;
document.write( linkify(text) );
Download Link:
https://github.com/skptricks/php-Tutorials/tree/master/Convert%20Text%20URLs%20into%20Links%20Using%20Javascript
This is all about Convert Text URLs into Links Using Javascript tutorial. In case of any issues please do comment in comment box below.
https://github.com/skptricks/php-Tutorials/tree/master/Convert%20Text%20URLs%20into%20Links%20Using%20Javascript
This is all about Convert Text URLs into Links Using Javascript tutorial. In case of any issues please do comment in comment box below.
