Parsear Tweet a HTML

Cuando utilizamos la API de Twitter (https://dev.twitter.com/rest/public), y por ejemplo  obtenemos los últimos tweets de un usuario, vamos a obtener algo así:

    [created_at] => Thu Nov 26 17:34:32 +0000 2015
    [id] => 669932259881938944
    [id_str] => 669932259881938944
    [text] => From our deep fryer to yours, happy Thanksgiving! https://t.co/ZdWsSRH9Xl
    [source] => <a href="http://www.sprinklr.com" rel="nofollow">Sprinklr</a>
    [truncated] => 
    ...
    [user] => stdClass Object
        (
           ...
        )

    [geo] => 
    [coordinates] => 
    [place] => 
    [contributors] => 
    [is_quote_status] => 
    [retweet_count] => 220
    [favorite_count] => 540
    [entities] => stdClass Object
        ..
        )

    [extended_entities] => stdClass Object
        (..
        )

    [favorited] => 
    [retweeted] => 
    [possibly_sensitive] => 
    [lang] => en
)

En general lo que nos interesa es la porción del Tweet:

[text] => From our deep fryer to yours, happy Thanksgiving! https://t.co/ZdWsSRH9Xl

Pero tenemos el inconveniente de que ese Tweet nos llega como texto plano, y en general lo tenemos que mostrar como html.

En el caso que necesiten obtener los Tweets les dejo este tutorial: TUTORIAL | DEMO

Pero bien supongamos que obtuvimos correctamente los Tweets y tenemos una lista con la siguiente forma:

<ul class="twitter">                            
                                            <li>From our deep fryer to yours, happy Thanksgiving! https://t.co/ZdWsSRH9Xl</li>
                                                <li>@thetopdonjake Good to hear. We recommend adding extra layers of security to your Google account: https://t.co/4iM0oCSLgp</li>
                                                <li>@JohnMacallaster Uh oh. Just to confirm, are you still able to sign into your account?</li>
                                                <li>Show someone they matter—share their story. Learn about #TheGreatListen from @storycorps https://t.co/8PZuGdtKrm https://t.co/0JVOW2fpox</li>
                                                <li>@mycalico Got it. We suggest adding extra layers of security to your Google account w/ these tips: https://t.co/4iM0oCSLgp</li>
            
</ul>

Podemos convertir cada uno de los Textos de los Tweets en HTML  de la siguiente forma con un poco de JavaScript:

String.prototype.parseURL = function() {
        return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function(url) {
                return url.link(url);
        });
};
String.prototype.parseUsername = function() {
        return this.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) {
                var username = u.replace("@","")
                return u.link("http://twitter.com/"+username);
        });
};
String.prototype.parseHashtag = function() {
        return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(t) {
                var tag = t.replace("#","%23")
                return t.link("http://search.twitter.com/search?q="+tag);
        });
};
$('.twitter li').each(function(){
    var text=$(this).text();
    $(this).html(text.parseURL().parseUsername().parseHashtag());        
})

 

Para ver cada una de las explicaciones de las funciones utilizadas vean los siguientes links: TUTORIAL | DEMO

Referencias:

 

Recent Posts

Leave a Comment