Question

I’ve got another question, although I reckon this one might be a little less mundane. But quick disclaimer, this one’s a little more open-ended, so let me start by saying that I am NOT looking for a complete solution to the greater problem I’m opening here, and I apologise in advance if I’m stretching the limit of acceptable minimums of reference code inclusion. I respect your time, plus I prefer to put the pieces together myself 😛

With that out fo the way, here’s the question:
I’ve set up a PHP function that pulls the text from a Twitter feed and then publishes it as a sort of ‘social media’ sidebar on a website. Trouble is, the links that are included in the Tweets are being reproduced as simple text. Example:

    <p>Last night saw the USA win gold in Women's Beach Volleyball---today at 1pm... the
    USA WOMEN SOCCER team will go... http://t.co/M7rtaZFC</p>

I’d like to grab that unlinked URL at the end there, wrap it in some friendly ‘a’ tags, and send it on its merry way.
I can figure out just about everything except actually filtering a jQuery return to target ‘http://’ + the rest of the string.

Is this possible using jQuery? Again, I don’t expect anything too in-depth, just looking for someone to point me in the right direction. Thank you for your time!

Answer 1

First Solution using just PHP

I don’t know how you grab the tweets, but I used this PHP-code before and it prints out links right away wrapped in <a>-tags. So, no need to use JavaScript here:

// get tweets
function UtilityGetLatestTweets() {

    $user       = 'username';
    $limit      = 10;
    $value      = '';

    $curl       = curl_init();

    curl_setopt($curl, CURLOPT_URL, 'http://search.twitter.com/search.atom?q=from:' . $user . '&rpp=' . $limit);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_HEADER, 0);

    $result     = curl_exec($curl);
    curl_close($curl);

    $xml        = simplexml_load_string($result);

    foreach ($xml->entry as $tweet) {   
        $value .= $tweet->content; 
    }

    return $value;
}

$tweets     = UtilityGetLatestTweets();

Maybe this helps you.

Edit: Second Solution using JavaScript

If you want an JavaScript-solution, you can go with this:

JavaScript

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>"); 
}

// when document is loaded
$(document).ready(function () {
    // select all p-tags within a container
    $('#content p').each( function (key, value) {
        // replace the content
        $(value).html( replaceURLWithHTMLLinks($(value).text()) );
    });
});

HTML

<div id="content">
    <p>Some text and link http://somethingsomething.com</p> 
    <p>Some text and link http://somethingdifferent.com</p>
</div>

This assumes that all <p>-tags are wrapped within a container with an ID.

• it uses the ID-selector in combination with the tag-selector: `$(‘#content p’) to select all tweets
• afterwards it loops through all elements:
  • it gets the text from each entry using $(value).text()
  • replaces the anchors using the replaceURLWithHTMLLinks from this answer
  • updates the HTML of the <p>-tag using $(value).html()