...

View Full Version : To find a particular char sequence in a string and changing the color



nandhakumar
05-15-2009, 11:40 AM
Guys, can you help me to write a code to find a char sequence in a string and highlight that with red color.


In text box when they start typing i will get list of string matching in a div. for example when they start typing "A", i will get a result as
Atlantic
Alaska
Atlanta, some thing like this. Can some one help me to high light "A" in all the String of the list to red color, in the same way when they type "AT", then "AT" in red color.

Thanks in advance

vwphillips
05-15-2009, 01:07 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[*/

.letter {
color:green;
}

.letteron {
color:red;
}
/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/

function zxcWords(zxcn,cls){
var zxcnu=zxcn.childNodes.length;
for(var zxc0=0;zxc0<zxcnu;zxc0++) {
var zxctxt=zxcn.firstChild.data;
var zxcrn=zxcn.removeChild(zxcn.firstChild);
if(zxcrn.nodeType==3){
var zxcs=zxctxt.split('');
for(var zxc1=0;zxc1<zxcs.length; zxc1++) {
var zxcnn=document.createTextNode(zxcs[zxc1]);
zxcnn=document.createElement('A');
zxcnn.className=cls;
zxcnn.appendChild(document.createTextNode(zxcs[zxc1]));
zxcn.appendChild(zxcnn);
}
}
else {
zxcWords(zxcrn,cls);
zxcn.appendChild(zxcrn);
}
}
}

function Init(id,cls){
zxcWords(document.getElementById(id),cls);
}

function Match(tb,id,cls,ncls){
var match=tb.value.toLowerCase().split('');
var obj=document.getElementById(id);
var letters=zxcByClassName(cls,obj);
var ary=[];
for (var z0=0;z0<letters.length;z0++){
if (letters[z0].firstChild.data.toLowerCase()==match[0]){
for (var z0a=0;z0a<match.length;z0a++){
if (match[z0a]==letters[z0+z0a].firstChild.data.toLowerCase()){
letters[z0+z0a].className+=' '+ncls;
ary[z0+z0a]=true;
}
}
}
}
for (var z1=0;z1<letters.length;z1++){
if (!ary[z1]) letters[z1].className=cls;
}
}

function Blur(id,cls){
var obj=document.getElementById(id);
var letters=zxcByClassName(cls,obj);
for (var z0=0;z0<letters.length;z0++){
letters[z0].className=cls;
}
}

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;
}

/*]]>*/
</script>

</head>

<body onload="Init('tst','letter');">
<div id="tst" >
Some text<br />
Some text<br />
</div>
<input name="" onkeyup="Match(this,'tst','letter','letteron')"/>
<input type="button" name="" value="Reset" onclick="Blur('tst','letter');"/>

</body>

</html>

nandhakumar
05-16-2009, 09:14 AM
Thanks for the code. Can u please help me to update the same
In the div you have give "Some Text", and it is getting highlighted when i type "Some t", the change i need here is when i type "Some Tect", then also "Some Te" and "t" is also getting highlighted means, the highlighting should be continous, for better understanding of the problem please see attached pic.

Thanks in advance

vwphillips
05-16-2009, 10:16 AM
<!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[*/

.letter {
color:green;
}

.letteron {
color:red;
}
/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/

function zxcWords(zxcn,cls){
var zxcnu=zxcn.childNodes.length;
for(var zxc0=0;zxc0<zxcnu;zxc0++) {
var zxctxt=zxcn.firstChild.data;
var zxcrn=zxcn.removeChild(zxcn.firstChild);
if(zxcrn.nodeType==3){
var zxcs=zxctxt.split('');
for(var zxc1=0;zxc1<zxcs.length; zxc1++) {
var zxcnn=document.createTextNode(zxcs[zxc1]);
zxcnn=document.createElement('A');
zxcnn.className=cls;
zxcnn.appendChild(document.createTextNode(zxcs[zxc1]));
zxcn.appendChild(zxcnn);
}
}
else {
zxcWords(zxcrn,cls);
zxcn.appendChild(zxcrn);
}
}
}

function Init(id,cls){
zxcWords(document.getElementById(id),cls);
}

function Match(tb,id,cls,ncls){
var match=tb.value.toLowerCase().split('');
var obj=document.getElementById(id);
var letters=zxcByClassName(cls,obj);
var ary=[];
for (var z0=0;z0<letters.length;z0++){
if (letters[z0].firstChild.data.toLowerCase()==match[0]){
for (var z0a=0;z0a<match.length;z0a++){
if (match[z0a]==letters[z0+z0a].firstChild.data.toLowerCase()){
letters[z0+z0a].className+=' '+ncls;
ary[z0+z0a]=true;
}
else break;
}
}
}
for (var z1=0;z1<letters.length;z1++){
if (!ary[z1]) letters[z1].className=cls;
}
}

function Blur(id,cls){
var obj=document.getElementById(id);
var letters=zxcByClassName(cls,obj);
for (var z0=0;z0<letters.length;z0++){
letters[z0].className=cls;
}
}

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;
}

/*]]>*/
</script>

</head>

<body onload="Init('tst','letter');">
<div id="tst" >
Some text<br />
Some text<br />
</div>
<input name="" onkeyup="Match(this,'tst','letter','letteron')"/>
<input type="button" name="" value="Reset" onclick="Blur('tst','letter');"/>

</body>

</html>

nandhakumar
05-16-2009, 10:46 AM
Sorry, one more change.

I might have explained you in better way. The first attachment shows how the code give by u shows and the next is the one i need (Please help me to achieve that). Sorry for the disturbance. I am very poor at English so i couldn't explain u in better way, i think the screen shot will help u.

vwphillips
05-16-2009, 12:07 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[*/

.letter {
color:green;
}

.letteron {
color:red;
}
/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/

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

function Match(tb,id,cls,ncls){
var match=tb.value.toLowerCase().split('');
var obj=document.getElementById(id);
var letters=zxcByClassName(cls,obj);
for (var ary=[],mary=[],z0=0;z0<letters.length;z0++){
if (letters[z0].firstChild.data.toLowerCase()==match[0]){
mary[z0]=[];
for (var z0a=0;z0a<match.length;z0a++){
if (match[z0a]==letters[z0+z0a].firstChild.data.toLowerCase()){
letters[z0+z0a].className+=' '+ncls;
ary[z0+z0a]=true;
mary[z0].push(z0+z0a);
}
else break;
}
}
}
for (var z1=0;z1<mary.length;z1++){
if (mary[z1]&&mary[z1].length!=match.length){
for (var z1a=0;z1a<mary[z1].length;z1a++) ary[mary[z1][z1a]]=false;
}
}
for (var z2=0;z2<letters.length;z2++){
if (!ary[z2]) letters[z2].className=cls;
}
}

function zxcReset(id,cls){
var obj=document.getElementById(id);
var letters=zxcByClassName(cls,obj);
for (var z0=0;z0<letters.length;z0++){
letters[z0].className=cls;
}
}

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 Init(id,cls){
zxcLetters(document.getElementById(id),cls);
}

/*]]>*/
</script>

</head>

<body onload="Init('tst','letter');">
<div id="tst" >
Orlando International Airport<br />
Some text<br />
</div>
<input name="" onkeyup="Match(this,'tst','letter','letteron')"/>
<input type="button" name="" value="Reset" onclick="zxcReset('tst','letter');"/>

</body>

</html>

nandhakumar
05-16-2009, 01:09 PM
Please check the screen shot. Where the same sequence is not highlighted again, like "o".

vwphillips
05-16-2009, 06:59 PM
hmm

I will look at this but will not be back before Monday, may be Sunday but doubt it.

?? quick stab


<!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[*/

.letter {
color:green;
}

.letteron {
color:red;
}
/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/

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

function Match(tb,id,cls,ncls){
var match=tb.value.toLowerCase().split('');
var obj=document.getElementById(id);
var letters=zxcByClassName(cls,obj);
for (var ary=[],mary=[],z0=0;z0<letters.length;z0++){
if (letters[z0].firstChild.data.toLowerCase()==match[0]&&!ary[z0]){
mary[z0]=[];
for (var z0a=0;z0a<match.length;z0a++){
if (match[z0a]==letters[z0+z0a].firstChild.data.toLowerCase()){
letters[z0+z0a].className+=' '+ncls;
ary[z0+z0a]=true;
mary[z0].push(z0+z0a);
}
else break;
}
}
}
for (var z1=0;z1<mary.length;z1++){
if (mary[z1]&&mary[z1].length!=match.length){
for (var z1a=0;z1a<mary[z1].length;z1a++) ary[mary[z1][z1a]]=false;
}
}
for (var z2=0;z2<letters.length;z2++){
if (!ary[z2]) letters[z2].className=cls;
}
}

function zxcReset(id,cls){
var obj=document.getElementById(id);
var letters=zxcByClassName(cls,obj);
for (var z0=0;z0<letters.length;z0++){
letters[z0].className=cls;
}
}

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 Init(id,cls){
zxcLetters(document.getElementById(id),cls);
}

/*]]>*/
</script>

</head>

<body onload="Init('tst','letter');">
<div id="tst" >
Oorlando International Airport<br />
Some text<br />
</div>
<input name="" onkeyup="Match(this,'tst','letter','letteron')"/>
<input type="button" name="" value="Reset" onclick="zxcReset('tst','letter');"/>
http://209.188.89.109/showthread.php?p=817600#post817600
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:220px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=10 cols=100 ></textarea>
</form>
</body>

</html>

vwphillips
05-18-2009, 01:33 PM
I have had another look at this and think that the 'quick stab' in post #8 now meets your requirement.

Please advise.

nandhakumar
05-20-2009, 05:28 PM
I have had another look at this and think that the 'quick stab' in post #8 now meets your requirement.

Can u help me locate this quick stab

vwphillips
05-20-2009, 06:33 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[*/

.letter {
color:green;
}

.letteron {
color:red;
}
/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/

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

function Match(tb,id,cls,ncls){
var match=tb.value.toLowerCase().split('');
var obj=document.getElementById(id);
var letters=zxcByClassName(cls,obj);
for (var ary=[],mary=[],z0=0;z0<letters.length;z0++){
if (letters[z0].firstChild.data.toLowerCase()==match[0]&&!ary[z0]){
mary[z0]=[];
for (var z0a=0;z0a<match.length;z0a++){
if (match[z0a]==letters[z0+z0a].firstChild.data.toLowerCase()){
letters[z0+z0a].className+=' '+ncls;
ary[z0+z0a]=true;
mary[z0].push(z0+z0a);
}
else break;
}
}
}
for (var z1=0;z1<mary.length;z1++){
if (mary[z1]&&mary[z1].length!=match.length){
for (var z1a=0;z1a<mary[z1].length;z1a++) ary[mary[z1][z1a]]=false;
}
}
for (var z2=0;z2<letters.length;z2++){
if (!ary[z2]) letters[z2].className=cls;
}
}

function zxcReset(id,cls){
var obj=document.getElementById(id);
var letters=zxcByClassName(cls,obj);
for (var z0=0;z0<letters.length;z0++){
letters[z0].className=cls;
}
}

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 Init(id,cls){
zxcLetters(document.getElementById(id),cls);
}

/*]]>*/
</script>

</head>

<body onload="Init('tst','letter');">
<div id="tst" >
Orlando International Airport<br />
Some text<br />
</div>
<input name="" onkeyup="Match(this,'tst','letter','letteron')"/>
<input type="button" name="" value="Reset" onclick="zxcReset('tst','letter');"/>
http://209.188.89.109/showthread.php?p=817600#post817600
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum