Auto-linking words (with stylesheet...?) 1

pinion · Sep 30, 2003

Hi,
I'm looking for a way to make certain words link to a specific URL without having to type in the a href tag every time. (e.g. if I write Yahoo, it'll automatically link to

http://www.yahoo.com

when uploaded)

I know this can be done since I've seen it on many professional sites and web blogs, and my best guess it is done with stylesheets, but I can't for the life of me figure out how to do it.

I have moderate stylesheet experience but I'm pretty much clueless when it comes to databases and things like that. So, does anyone know how these sites auto-link words, and can it be done without a complex set up?

I'd greatly appreciate any responses. Thanks in advance.

dwarfthrower · Sep 30, 2003

It's more likely to be a server side program inserting the links prior to the page being delivered to the browser. It could be done with JavaScript once the page has loaded - a set of regular expression replacements on the text within the content.

CSS governs how things look rather than how they function. While you could use CSS to make ordinary words look like links - just make them underlined and blue, you would need some underlying code to match the target words with the links.

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}

pinion · Sep 30, 2003

Okay, thanks, so it's not CSS... but I still have no idea how to do it. Anyone seen code that does this that I could edit or anything like that?

dwarfthrower · Oct 1, 2003

Haven't seen any... doesn't mean I can't write some.

Using regular expressions it's easy enough to do. I created an object to sort of encapsulate the data we needed (string to replace, url to go to) and provide a means of creating both a regular expression and <a> tag out of the two supplied arguments.

Then I just created an array of these objects and looped through the array on load replacing the target words with the links for whatever container object held the content.

This should be a bit of fun for you:

Code:

<html>
<head>
<script>
// create an object to store some stuff for us
function linkReplace(strTextToReplace, strURL){
 this.text = strTextToReplace;
 this.regExp = new RegExp(strTextToReplace, 'gi');
 this.URL = strURL;
}
linkReplace.prototype.getLinkText = function(){
 return '<a href=&quot;' + this.URL + '&quot;>' + this.text + '</a>';
}

// create an array to store all the words we want replaced
var theReplacements = new Array();
//populate the array
theReplacements[0] = new linkReplace('Yahoo', '[URL unfurl="true"]http://www.yahoo.com');[/URL]
theReplacements[1] = new linkReplace('Google', '[URL unfurl="true"]http://www.google.com');[/URL]
theReplacements[2] = new linkReplace('Tek-Tips', '[URL unfurl="true"]http://www.tek-tips.com');[/URL]

// This function gets called onload and performs all the replacements for
// the given object
function doReplace(strObjId){
 var theObj = document.getElementById(strObjId);
 for(var i = 0; i < theReplacements.length; i++){
 theObj.innerHTML = theObj.innerHTML.replace(theReplacements[i].regExp, theReplacements[i].getLinkText());
 }
}
</script>
</head>
<body onload=&quot;doReplace('MainBodyContent')&quot;>
<div id=&quot;MainBodyContent&quot;>Blah Blah Blah Blah Yahoo Blah Blah Blah Google Blah Blah Blah Tek-Tips Blah Blah</div>
</body>
</html>

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}

pinion · Oct 1, 2003

Wow, that works great. I am absolutely floored a complete stranger would do all that work just for me for no reason other than kindness. Thanks for restoring my faith in humanity.

And even more shocking is it worked right away even though I tweaked it a little (e.g. made it so the links had a _top target since it's in an iframe)! Usually whenever I change anything on a script I spend hours trying to make it work again.

The only bad thing I can say is it's a bit odd seeing the links appear after the text loads, but oh well, who really cares. And that may just be my slow-ish computer.

If you want to see the end result, it's at

http://www.canuckscentral.com

in the "top stories" box. I'm using it so that hockey player names (such as Markus Naslund) link to their appropriate player profile automatically... something I had always done manually before while wishing I could find a script like you just gave me every day. I have carpal tunnel-like hand problems so any shortcut on daily work I can get is awesome.

With the combination of this new script and the very simplified blog script I customized before, I've basically made it so anyone who can type can upload articles for me.... no technical knowledge required. Probably not very impressive to the experts here, but it's a miracle I got it working considering my lack of knowledge in anything beyond HTML and graphics.

Thanks again... in return I'd be glad to link to any site you want to promote on my links page; just give me the URL. (My site gets around 3,000 unique visitors per day)

deecee · Oct 1, 2003

I wish i had it in me to learn javascript -- nice piece of code dwarf

<signature>
sometime you just gotta say "WHAT THE @#*% !!"
</signature>

dwarfthrower · Oct 1, 2003

Hey, nice site. Happy to help out in a small way.

>> it's a bit odd seeing the links appear after the text loads

Yeah, that'll happen. The script has to wait until the page loads before it can do the search & replace on the text.

Glad you like it.

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Auto-linking words (with stylesheet...?) 1

pinion

Programmer

dwarfthrower

Programmer

pinion

Programmer

dwarfthrower

Programmer

pinion

Programmer

deecee

Technical User

dwarfthrower

Programmer

Similar threads

Part and Inventory Search

Sponsor