Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts

    To find a particular char sequence in a string and changing the color

    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Apr 2009
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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
    Attached Thumbnails Attached Thumbnails To find a particular char sequence in a string and changing the color-highligh.jpg  

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Apr 2009
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails To find a particular char sequence in a string and changing the color-high-light1.jpg  

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Apr 2009
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Please check the screen shot. Where the same sequence is not highlighted again, like "o".
    Attached Thumbnails Attached Thumbnails To find a particular char sequence in a string and changing the color-high2.jpg  

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    hmm

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

    ?? quick stab

    Code:
    <!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>
    Last edited by vwphillips; 05-16-2009 at 07:07 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    I have had another look at this and think that the 'quick stab' in post #8 now meets your requirement.

    Please advise.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    New Coder
    Join Date
    Apr 2009
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •