How to display words in red and green

asifakhtar

12-24-2010, 04:16 PM

Hi,
I have a long paragraph and I have been asked to display words in red and green in such a way that that fist word should be red, 2nd word should be green, 3rd word should be red and 4th word should be green and so on…
For example: this is just a sample.

Thank you for your participation.

Jquery or JavaScript will do.

Thanks.

DJCMBear

12-24-2010, 04:43 PM

Try this.

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
(function($){
$.colorChanger = function(o) {
var i,j,t,e,n=1,c,k=[],r='red',g='green';
if(o.substr(0,1) == ".") {
e = document.getElementsByTagName('*');
for(i=0;i<e.length;i++) {
if(e[i].className == o.substr(1)) {
t = e[i].innerHTML.split(' ');
for(j=0;j<t.length;j++) {
if(n==1) {c=r;n=2;} else {c=g;n=1;}
k[j] = "<font color=\""+c+"\">"+t[j]+"</font>";
}
e[i].innerHTML = k.join(' ');
n=1;
}
}
} else if(o.substr(0,1) == "#") {
e = document.getElementById(o.substr(1));
t = e.innerHTML.split(' ');
for(i=0;i<t.length;i++) {
if(n==1) {c=r;n=2;} else {c=g;n=1;}
k[i] = "<font color=\""+c+"\">"+t[i]+"</font>";
}
e.innerHTML = k.join(' ');
n=1;
}
};
})(window);

window.onload=(function(){
colorChanger('.demo'); // Use a dot (.) at the start for classes or a hash (#) for id's
});
</script>
</head>
<body>
<div class="demo">Thank you for your participation.</div>
<div class="demo">Thank you for your participation.</div>
</body>
</html>

vwphillips

12-24-2010, 04:52 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.color1 {
color:red;
}

.color2 {
color:green;font-Size:20px;
}

/*]]>*/
</style></head>

<body>
<div id="tst" >
Thank you for your participation.
<br />

Thank you for your participation.
</div>
<script type="text/javascript">
/*<![CDATA[*/

function zxcWords(n){
for(var nu=n.childNodes.length,txt,rn,s,nn,z0a,z0=0;z0<nu;z0++){
txt=n.firstChild.data;
rn=n.removeChild(n.firstChild);
if(rn.nodeType==3){
var s=txt.split(' ');
for(z0a=0;z0a<s.length;z0a++) {
nn=document.createElement('A');
nn.className='zxc';
nn.appendChild(document.createTextNode(s[z0a]));
n.appendChild(nn);
n.appendChild(document.createTextNode(' '));
}
}
else {
zxcWords(rn);
n.appendChild(rn);
}
}
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}

function ColorWords(o){
var obj=document.getElementById(o.ID);
zxcWords(obj);
var words=zxcByClassName('zxc',obj,'A');
for (var cnt=0,z0=0;z0<words.length;z0++){
if (words[z0].innerHTML){
words[z0].className=o.ClassNames[cnt%o.ClassNames.length==0?0:1];
cnt++;
}
}
}

ColorWords({
ID:'tst',
ClassNames:['color1','color2']
});
/*]]>*/
</script>

</body>

</html>

Philip M

12-24-2010, 05:44 PM

Or rather shorter:-

<script type = "text/javascript">
var txt = "Thank you for your valuable participation. We really appreciate it."
txt = txt.replace(/\s{2,}/g," "); // Replace multiple spaces with one space
var txtsplit = txt.split(" ");
var len = txtsplit.length;

for (var i = 0; i<len; i++) {
if (i%2 == 0) {
txtsplit[i] = "<font color = 'red'>" + txtsplit[i] + "</font>"
}
else {
txtsplit[i] = "<font color = 'green'>" + txtsplit[i] + "</font>"
}
}

var newtext = txtsplit.join(" ");
document.write(newtext);
</script>

DJCMBear

12-24-2010, 06:08 PM

What if the OP has all the text and mark-up already done, wouldn't changing the styles for all classes or the id's and not putting the text inside the javascript itself? just wondering if it's easier or not for the OP.

jmrker

12-24-2010, 08:25 PM

Old Pedant

12-24-2010, 10:41 PM

Couldn't help it. Even shorter:

<script type = "text/javascript">
var txt = "Thank you for your valuable participation. We really appreciate it."
// Replace (possibly multiple) spaces *AND TABS AND NEWLINES* with one space
var words = txt.replace(/\s+/g," ").split(" ");
for (var i = 0; i < words.length; i++) {
// font tag considered obsolete...use span instead:
words[i] = '<span style="color: ' + (i%2==0?"red":"green") + ';">'
+ words[i] + "</span>"
}
document.write(words.join(" "));
</script>

asifakhtar

12-25-2010, 01:02 AM

Another solution to the problem the OP put on another forum (duplicated posts)
See post #2 of : http://www.webdeveloper.com/forum/showthread.php?t=240196

Guess OP never got around to looking back there.
Similar to post #4 here.

Thank you very much every 1. Solution at http://www.webdeveloper.com/forum/showthread.php?t=240196 works for me.

Thanks

Philip M

12-25-2010, 07:45 AM

Thank you very much every 1. Solution at http://www.webdeveloper.com/forum/showthread.php?t=240196 works for me.

Thanks

So we wasted our time! :(

siberia-man

12-25-2010, 02:51 PM

Hi all,

I understand that the topic starter lost his interest to this theme. But I thought to myself that I can show another weird solution of the problem:

var txt = "Thank you for your valuable participation. We really appreciate it."

var colors = ['red', 'green'];
var i = 0;

var result = txt.replace(/\w+/g, function($0)
{
var result = '<span style="color: ' + colors[i] + '">' + $0 + '</span>';
i = (i + 1) % 2;
return result;
});

jmrker

12-25-2010, 05:10 PM

So we wasted our time! :(

Nah ... I just won one :):D for a change. (see added 'rainbow' code at link)

Philip M

12-25-2010, 06:33 PM