BackboneJS how to turn text URLs into clickable links

Question

I have a Backbone App where I fetch Twitter tweets through an API which returns the result as string. What I need is to make the http in the string clickable. How can I achieve this?

Here is the text string:

 Who does John wish he could have sung with over the span of his career? See the video answer here! http://t.co/pbPXaDkGEJ

and I want it to be like

<span>Who does John wish he could have sung with over the span of his career? See the video answer here! <a href="http://t.co/pbPXaDkGEJ"> click here</a></span>

I tried to do something like:

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

but that didnt work...

[UPDATE]

Ok, I'm gonna add my Backbone View:

function (App, Backbone) {

    var ArtistTwitter = App.module();

    ArtistTwitter.View = Backbone.View.extend({
        tagName: 'ul',
        className: 'actweets',
        template: 'artistTwitter',
        initialize: function() {
            this.listenTo(this.collection, 'all', this.render);
        },
        serialize: function() {
            return this.collection ? this.collection.toJSON() : [];
        }
    });
    ArtistTwitter.ArtistTwitterCollection = Backbone.Collection.extend({
        url: function() {
            return '/myproject/index.php/api/social_feeds/fetchNewTweet/' + this.artist_id;
        }
    });

    return ArtistTwitter;
}

I tried to add the above mentioned replacement code inside an afterRender-function but that didnt work...

Any suggestion is welcome...

Here's a good answer to a similar question: http://stackoverflow.com/a/7123542/536610 — Niklas, May 13 '14 at 11:05
Ok was checking out http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links/7123542#7123542 - regarding BackboneJS, should I run this in `initialize` or `afterRender` or..??? — SHT, May 13 '14 at 11:13

Tumas · Answer 1 · 2014-05-14T12:01:59.637

Well it replaces links correctly but you need to modify it a bit to get your expected output. If I understand correctly, you only need to change sencond $1 to the static text 'click here' to get the desired output:

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

This will return:

replaceURLWithHTMLLinks("Who does John wish he could have sung with over the span of his career? See the video answer here! http://t.co/pbPXaDkGEJ ")

"Who does John wish he could have sung with over the span of his career? See the video answer here! <a href='http://t.co/pbPXaDkGEJ'>click here</a> "

UPDATE:

In this case I think you should be able to get what you want by adding repleaceURLWithHTMLLinks to your model view (the view you pasted is for your collection) and implementing render method:

ArtistTwitterItemView.View = Backbone.View.extend({
    tagName: 'li',

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

    // something like this (copy paste will not work but it might get you on the track): 
    // it looks like this should in be a model view 
    // in collections view you should iterate through your collection and call render for each item
    // in the case for model view call replaceURLWithHTMLLinks before rendering:
    render: function(){
       var data = this.model.toJSON();
       _.extend(data, { replacedText: replaceURLWithHTMLLinks(data.text) });
       var html = _.template($(this.template), data);
       this.$el.html(html);
    }
});

Ok any idea how to implement this in BackboneJS? The string with the text-link actually comes from an API, so do I have to add this piece of code inside the View in an `afterRender`-function? — SHT, May 14 '14 at 11:18
depending on your setup you can either add this function as a helper method and use it your templates or you could add it view (or model) and call it to transform model attributes before passing them to the template for rendering — Tumas, May 14 '14 at 11:24
Hmm Ok, I updated my question and added my View to make it more clear. Transforming sounds interesting but I'm pretty new to BackboneJS, so I cant really follow you — SHT, May 14 '14 at 11:32

BackboneJS how to turn text URLs into clickable links

1 Answers1