Twitter feed

Hi folks,

I have a little script that pulls down my twitter feed into a <ul>

The only problem is that the links in the text are just text rather than hyper links.

How can I loop through the content and change each http://www.something.com into proper

<a href="http://www.something.com>http://www.something.com</a>

I’m fairly new to JS so please be gentle with me.

Thanks.

You’ll need to post your JS code so that a modification can be provided.

Also, which browsers are you trying to support? IE6? Mobile Safari?

My code.

I found most of this on a tutorial but I have added to it.


<!DOCTYPE html>
<html>
	<head>
		<title>JQUery get tweets</title>
		<style>
			
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
		<script>
			$(document).ready(function(){
				
	
						
				var params = $("#tweets").attr("rel");
				params = params.split("|");
				username = params[0];
				count = params[1];
				var format='json';
				var url='http://api.twitter.com/1/statuses/user_timeline/'+username+'.'+format+'?callback=?';
				$.getJSON(url,function(tweet){ 
					var tweets='<ul>';
					for (i=0;i<=count;i++){
						tweets+= "<li>" + (tweet[i].text) + "</li>";
					}	
					tweets+= "</ul>";				
					
					var start = tweets.indexOf("http");
					var end = tweets.indexOf(" ", start);
					var len = end - start;
					var link = tweets.substr(start,len)
					console.log(start + " " + end + " " + link);	
					
					$("#tweets").html(tweets);
				});
			});
		</script>
		
	</head>
	<body>
		
		<div id="tweets" rel="smileyhcoder|5"></div>
		
	</body>
</html>

Not sure if it’s better to loop through the end result or to replace during each occurrence of the for loop. In either case there could and will be multiple links.

Thanks

This should work - it also adds the links to @Name and to #Searches, which you may want as well…


var params = $("#tweets").attr("rel").split("|"),
	username = params[0],
	count = params[1],
	url = 'http://api.twitter.com/1/statuses/user_timeline/' + username + '.json?callback=?';
	
$.getJSON(url, function(tweet) { 
	var i, tweets;	
	tweets += '<ul>';
	for (i = 0; i <= count; i++){
		tweets += '<li class="tweet">' + (tweet[i].text) + '</li>';
	}	
	tweets += '</ul>';				
	$("#tweets").html(tweets);
	
	$('.tweet').each(function() {
		var matchees
			atNamePattern = /@[\\w-]+/,
			atSearchPattern = /#[\\w-]+/,
		
			// Modified from http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links/7123542#7123542
			urlPattern = /\\b(?:https?|ftp):\\/\\/[a-z0-9-+&@#\\/%?=~_|!:,.;]*[a-z0-9-+&@#\\/%=~_|]/gim;
		
		// Modified from http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links/7123542#7123542
		$(this).html(
			$(this).html().replace(urlPattern, '<a href="$&">$&</a>')
		);

		$(this).html(
			$(this).html().replace(atNamePattern, '<a href="http://twitter.com/$&">$&</a>')
		);

		$(this).html(
			$(this).html().replace(atSearchPattern, '<a href="http://twitter.com/search?q=$&">$&</a>')
		);
	});
});

Simplified this some more, I wasn’t crazy about the previous solution:



var params = $("#tweets").attr("rel").split("|"),
	username = params[0],
	count = params[1],
	url = 'http://api.twitter.com/1/statuses/user_timeline/' + username + '.json?callback=?';
	
$.getJSON(url, function(tweet) { 
	var i, tweets,
		atNamePattern = /@[\\w-]+/,
		atSearchPattern = /#[\\w-]+/,
		// Modified from http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links/7138764#7138764					
		urlPattern = /\\b(?:https?):\\/\\/[a-z0-9-+&@#\\/%?=~_|!:,.;]*[a-z0-9-+&@#\\/%=~_|]/gim;	
	tweets += '<ul>';
	for (i = 0; i <= count; i++) {
		tweet[i].text = tweet[i].text
			.replace(urlPattern, '<a href="$&">$&</a>')
			.replace(atNamePattern, '<a href="http://twitter.com/$&">$&</a>')
			.replace(atSearchPattern, '<a href="http://twitter.com/search?q=$&">$&</a>');
		tweets += '<li class="tweet">' + (tweet[i].text) + '</li>';
	}	
	tweets += '</ul>';				
	$("#tweets").html(tweets);
});		

Absolutely perfect.

That’s exactly what I was looking for.

Thanks so much