How to replace links in a string with clickable versions using jquery regex?

Question

See line 8 in the code below, with the comment:

<script>
$(function(){
    $.getJSON('http://twitter.com/status/user_timeline/TWITTER.json?count=1&callback=?',twitterJSON);
    function twitterJSON(data){
        var twitterOut     = '<p>'+data[0].text+'</p><strong>- '+data[0].user.name+'</strong>';
        var twitterOutAt   = twitterOut.replace(/\B@([\w-]+)/gm,'<a href="http://twitter.com/$1">@$1</a>');
        var twitterOutHash = twitterOutAt.replace(/\B#([\w-]+)/gm,'<a href="http://search.twitter.com/search?q=$1">#$1</a>');
        var twitterOutDone = twitterOutHash.replace(/(href="|<a.*?>)?[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g,'<a href="$1">$1</a>'); // not working :(
        $('.twitter').html(twitterOutDone);
    }
});
</script>

Any help refactoring the code would be very much appreciated!

For example: there must be a way to chain .replace so one doesn't have to assign a new var again and again. I've tried var twitterOut.replace().replace()... but that doesn't seem to work :(

Leaving the rest aside, you can certainly chain replaces (as a replace returns the new string on which you can apply another replace), could you post the code that's not working for you? — deviousdodo
– deviousdodo, Commented Dec 2, 2011 at 8:15

Silver Light · Accepted Answer · 2011-12-02 08:17:56Z

6

Here is the working function I use:

jQuery.fn.urlize = function() {
    if (this.length > 0) {
        this.each(function(i, obj){
            // making links active
            var x = $(obj).html();
            var list = x.match( /\b(http:\/\/|www\.|http:\/\/www\.)[^ <]{2,200}\b/g );
            if (list) {
                for ( i = 0; i < list.length; i++ ) {
                    var prot = list[i].indexOf('http://') === 0 || list[i].indexOf('https://') === 0 ? '' : 'http://';
                    x = x.replace( list[i], "<a target='_blank' href='" + prot + list[i] + "'>"+ list[i] + "</a>" );
                }

            }
            $(obj).html(x);
        });
    }
};

In your case:

$('.twitter').urlize();

answered Dec 2, 2011 at 8:17

Silver Light

46.3k36 gold badges126 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:00:58Z

I found a solution here: https://stackoverflow.com/a/3890175/1076933

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Twitter</title>
</head>
<body id="top">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

    $(function() {

        $.getJSON("http://twitter.com/status/user_timeline/envato.json?count=1&callback=?", twitterJSON);

        function twitterJSON(data) {
            var twitterOut = data[0].text;
            twitterOut = twitterOut
                .replace(/(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim, '<a href="$1">$1</a>')
                .replace(/\B#([\w-]+)/gm, '<a href="http://search.twitter.com/search?q=$1">#$1</a>')
                .replace(/\B@([\w-]+)/gm, '<a href="http://twitter.com/$1">@$1</a>');
            $("body").html(twitterOut);
        };

    });

</script>
</body>
</html>

Thanks to Silver Light as well, his function works a charm!

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Twitter</title>
</head>
<body id="top">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

    $(function() {

        jQuery.fn.urlize = function() {
            if (this.length > 0) {
                this.each(function(i, obj) {
                    var x = $(obj).html();
                    var list = x.match(/\b(http:\/\/|www\.|http:\/\/www\.)[^ <]{2,200}\b/g);
                    if (list) {
                        for (i = 0; i < list.length; i++) {
                            var prot = list[i].indexOf("http://") === 0 || list[i].indexOf("https://") === 0 ? "" : "http://";
                            x = x.replace(list[i], "<a target='_blank' href='" + prot + list[i] + "'>" + list[i] + "</a>");
                        }
                    }
                    $(obj).html(x);
                })
            }
        };

        $.getJSON("http://twitter.com/status/user_timeline/envato.json?count=1&callback=?", twitterJSON);

        function twitterJSON(data) {
            var twitterOut = data[0].text;
            twitterOut = twitterOut
                .replace(/\B#([\w-]+)/gm, '<a href="http://search.twitter.com/search?q=$1">#$1</a>')
                .replace(/\B@([\w-]+)/gm, '<a href="http://twitter.com/$1">@$1</a>');
            $("body").html(twitterOut).urlize();
        };

    });

</script>
</body>
</html>

Collectives™ on Stack Overflow

How to replace links in a string with clickable versions using jquery regex?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related