Sunday, January 28, 2018

Convert Text URLs into Links Using Javascript

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 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.

Convert Text URLs into Links Using Javascript : https://goo.gl/JZLKmF

So, We have implemented this with the help of comment box, when user 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.

<html>

<head>
    <link rel="stylesheet" type="text/css" href="design.css">
    <script src="jquery.min.js"></script>
</head>
<script>
    $(document).ready(function() {

        $("#submitform").on("click", function() {

            var message = $('textarea').val();

            if (message.length == "0") {
                $(".errorMsg").show();

            } else {

                $("#display-results").prepend("<div id='message' >" + linkify(message) + "</div>");
                $('textarea').val("");

            }
        });
    });

    function linkify(text) {
        var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
        return text.replace(exp, "<a href='$1' target='_blank'>$1</a>");
    }
</script>

<body>
    <center> <b> Convert Text URLs into Links Using Javascript. </b> </center>

    <div id="mainbox">
        <textarea rows="4" cols="65"></textarea>
        <div class="errorMsg">*Please enter the text.</div>

        <input type="button" class="button" id="submitform" value="Submit">
    </div>

    <div id="display-results"></div>

</body>

</html>


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:
<script type="text/javascript">
function linkify(text) {
        var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
        return text.replace(exp, "<a href='$1' target='_blank'>$1</a>");
}

var text = "welcome to skptricks : http://www.skptricks.com/" ;
document.write( linkify(text) );

</script>

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.


2 comments: