Colour coding

Avril · 09-06-2006, 10:10 AM

Hi!
I'm really a raw beginner. Just wanted to know how to adapt this code so that the word April Blue turns blue everytime it shows up on the page. Thanks for your help:

Code:

<html>

<head>
<title>April Blue</title>

</head>
<body>
When you do this, only one instance of the string April Blue within the script tags turns blue.<br>
<script language= "JavaScript">
var TextString= "April Blue";

TextString.fontcolor("#0000FF")


document.write(TextString.fontcolor("#0000FF"))
</script><br>

How do I make all instances of April Blue turn into blue automatically? 


	</body>
</html>

Hope it's not too complicated! Thank you.

Kor · 09-06-2006, 10:57 AM

Try this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
onload=function(){
var el=document.getElementsByTagName('body')[0].childNodes;
var txt='<span style="color:#0000FF">April Blue</span>';
for(var i=0;i<el.length;i++){
el[i].nodeType==3?el[i].parentNode.innerHTML=el[i].parentNode.innerHTML.replace(/April Blue/g,txt):null;
}
}
</script>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. April Blue Pellentesque nulla urna, pellentesque porta, fermentum eget, lacinia eu, justo. April Blue Suspendisse mauris. Cras varius.
<br>
<br>
<div>
Etiam accumsan. Maecenas condimentum elit non metus. April Blue Etiam vel erat at urna dapibus scelerisque. Proin sollicitudin lacus at enim.
</div>
</body>
</html>

vwphillips · 09-06-2006, 11:16 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--

function tmWords(tmN,stg,col){
 var tmnu=tmN.childNodes.length;
 for(var tm0=0;tm0<tmnu;tm0++) {
  var tmTxt=tmN.firstChild.data;
  var tm=tmN.removeChild(tmN.firstChild);
  if(tm.nodeType==3){
   tmTxt=tmTxt.replace(stg,'$£4£');
   tmAry=tmTxt.split(' ');
   for(var tm1=0;tm1<tmAry.length; tm1++) {
    var tmT=document.createElement('SPAN');
    if (tmAry[tm1]=='$£4£'){
     tmAry[tm1]=stg;
     tmT.style.color=col;
    }
    var tmTTxt=document.createTextNode(tmAry[tm1]+' ');
    tmT.appendChild(tmTTxt);
    tmN.appendChild(tmT);
   }
  }
  else {
   tmWords(tm,stg,col);
   tmN.appendChild(tm);
  }
 }
}

//-->
</script>

</head>

<body onload="tmWords(document.getElementsByTagName('BODY')[0],'April Blue','blue');tmWords(document.getElementById('Tst'),'Some','red');">
Some April Blue Text <br>
Some April Blue Text <br>
<div id="Tst" >Some April Blue Text <br></div>
Some April Text <br>
Some Blue Text <br>
Some April Blue Text <br>
</body>

</html>

Avril · 09-06-2006, 09:18 PM

Wow! Both work fine and a bonus with a red text and split words too! Thanks a lot to both of you!