Javascript Highlight Text and Dynamic Creation of Links

I created this small Javascript to markup text with html links. The use of this is for advertising or other site affiliation.

The text that you wish to markup is in an array as well as the url and description. This allows you to add as many text links as you wish and obviously you could make this database driven with some additional coding.

I have also created a div for the containing text, this ensures they other elements are not affected outside the div tag.

<script>

var word = new Array('The','Javascript','Functions');

var url = new Array('http://www.google.co.uk', 'http://www.yahoo.co.uk','http://www.lycos.co.uk');

var desc = new Array('http://www.google.co.uk','http://www.yahoo.co.uk','http://www.lycos.co.uk');

function generatelinks() {

// Target the mytext div

var bdy = document.getElementById('mytext').innerHTML;

for (var i = word.length - 1; i >= 0; i--) {

var re = new RegExp('(\\b' + word[i] + '\\b)','ig');

bdy = bdy.replace(re,'<a class="hl" href="' + url[i] + '" title="' + desc[i] + '" target="_blank">$1<\/a>');

}

document.getElementById('mytext').innerHTML = bdy;

}

// run script on page start

window.onload = generatelinks;



</script>

<style>

.hl {

cursor:pointer;

color:#009999;

border-bottom-style: dashed;

border-bottom-color: #009999;

border-bottom-width: 1px;

text-decoration: none;

}

</style>

<div id="mytext">
Your Text Here

</div>

Here is an example of how it should look: