Select and filter innerHTML text using jQuery

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 :P

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!

IMO, you could try a simple javascript solution instead of jquery. See a good example [here](http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links) — Gunnar, Aug 15 '12 at 11:46
Thanks, but the part of this equation I'm trying to solve is the filter/select dilemma. How can I DETECT and TARGET from a block of text? If I can't do that then I have nothing to pass to the function you've shared (unless I'm missing something...) — monners, Aug 15 '12 at 12:24
Well, this JS function uses expressions. That means it searches for whatever the expression is setup to filter. In this case, you input a string of text and the expression searches for a URL (starting with 'https', 'ftp' and 'file') within the text and adds the tags you want to add around it. So it does "detect and target from a block of text" like you want. — Gunnar, Aug 15 '12 at 15:25

score 2 · Accepted Answer · edited May 23 '17 at 12:05

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 . '&amp;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()

Thanks mate. I had considered tackling the problem on the PHP side, and I may ultimately end up doing that, but it's still something I'd prefer to do with jQuery or javaScript. Thanks for the solution though :) — monners, Aug 15 '12 at 12:18
I'm not sure about the SEO-benefits. But maybe search engines will not follow plain links in your code as they don't see the converted ones. And you reduce client-side activity, doing it server-side. — insertusernamehere, Aug 15 '12 at 12:25
You raise an interesting point... Perhaps this approach isn't the right solution to this problem, but I'd still really like to know if there's a javascript solution, short of exploding each message into an array of characters... — monners, Aug 15 '12 at 12:33
+1, use regex to track down the protocol (http://) and then assume, text until the next white space, is a link. then wrap it with an `` — raddrick, Aug 15 '12 at 13:31
worked perfectly. Thank you very much. In retrospect I reckon your PHP solution is probably the better way to go, but this is definitely a good tool to add to the belt. Cheers. — monners, Aug 15 '12 at 17:05
I'm glad I could help. And yes, it's always good to know an alternative approach, in case the first won't work. — insertusernamehere, Aug 15 '12 at 19:05

Select and filter innerHTML text using jQuery

1 Answers1

First Solution using just PHP

Edit: Second Solution using JavaScript

JavaScript

HTML