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 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    very simple JavaScript: text highligher

    I don't know Javascript very well, but I'll bet a script similar to what I'm looking for already exists and I can modify it slightly to meet my needs. I just can't figure out what to search for.

    I'd like to create a web form that takes a block of text and, when the user clicks Submit, creates a popup window with the text reproduced but certain words and phrases highlighted (from a phrase list in the JavaScript). A bonus would be to convert all text to uppercase before it is examined, so that text can still be highlighted even if the capitalization is weird (the term list would be all-capital).

    Do you know of any similar script I could work from, or can you give me any ideas?

    Many thanks!
    - Luke Muehlhauser

  • #2
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    I'm not sure if you can highlight text within a pop-up box or not, but if you were able to the code wouldn't be to hard to create.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,516
    Thanks
    3
    Thanked 505 Times in 492 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[*/
    .hlite {
      background-Color:#FF6666;font-Weight:bold;
    }
    
    .hlite1 {
      font-Style:italic;
    }
    /*]]>*/
    </style><script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Text HighLighter (25-August-2007) DRAFT
    // by VicPhillips http://www.vicsjavascripts.org.uk
    
    var HiliteAry=['to','the','phrase list'];
    var HiliteAry1=['web','that'];
    var HiliteAry2=['can','that'];
    
    
    
    
    function zxcHiLight(zxcsid,zxcdid,zxchlary,zxccls){
     var zxcsobj=document.getElementById(zxcsid);
     var zxcd=document.getElementById(zxcdid);
     while (zxcd.childNodes.length>0) zxcd.childNodes[0].parentNode.removeChild(zxcd.childNodes[0]);
     var zxcclds=zxcsobj.childNodes;
     for (var zxc0=0;zxc0<zxcclds.length;zxc0++) zxcES(zxcclds[zxc0].cloneNode(true),{},zxcd);
     zxcES(zxcd,{},document.getElementsByTagName('BODY')[0]);
     for (var zxc1=0;zxc1<zxchlary.length;zxc1++){
      var zxcnodes=zxcTxtNodes(zxcd);
      for (var zxc1a=0;zxc1a<zxcnodes.length;zxc1a++){
       if (zxcnodes[zxc1a].nodeType==3){
        var zxctxtnode=zxcnodes[zxc1a];
        var zxctxt=zxctxtnode.data
        zxctxt=zxctxt.replace(new RegExp(' '+zxchlary[zxc1],'gi'),' ^')
        zxctxt=zxctxt.replace(new RegExp(zxchlary[zxc1]+' ','gi'),'^ ')
        var zxcsplit=zxctxt.split('^');
        var zxca=zxcES('A',{});
        for (var zxc1b=0;zxc1b<zxcsplit.length;zxc1b++){
         if (zxc1b>0) zxcES('SPAN',{},zxca,zxchlary[zxc1]).className=zxccls;
         zxcES('SPAN',{},zxca,zxcsplit[zxc1b]);
        }
        zxcnodes[zxc1a].parentNode.replaceChild(zxca,zxcnodes[zxc1a]);
       }
      }
     }
    }
    
    function zxcTxtNodes(zxcn){
     var zxcary=[];
     var zxcclds=zxcn.childNodes;
     for (var zxca=0;zxca<zxcclds.length;zxca++){
      if (zxcclds[zxca].nodeType==3) zxcary.push(zxcclds[zxca]);
     }
     var zxceles=zxcn.getElementsByTagName('*');
     for (var zxcb=0;zxcb<zxceles.length;zxcb++){
      var zxcclds=zxceles[zxcb].childNodes;
      for (var zxcba=0;zxcba<zxcclds.length;zxcba++){
       if (zxcclds[zxcba].nodeType==3) zxcary.push(zxcclds[zxcba]);
      }
     }
     return zxcary;
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <p id="Para1" >
    I don't know Javascript very well, but I'll bet a script similar to what I'm looking for already exists and I can modify it slightly to meet my needs. <span>I just can't figure out what to search for</span>.<br />
    
    I'd like to create a web form that takes a block of text and, when the user clicks Submit, creates a popup window with the text reproduced but certain words and phrases highlighted (from a phrase list in the JavaScript). A bonus would be to convert all text to uppercase before it is examined, so that text can still be highlighted even if the capitalization is weird (the term list would be all-capital).
    
    Do you know of any similar script I could work from, or can you give me any ideas?
    <br />
    Many thanks!
    </p>
    <input type="button" name="" value="Higlite Para1" onclick="zxcHiLight('Para1','Para2',HiliteAry,'hlite');"/></body>
    <input type="button" name="" value="Higlite Para1" onclick="zxcHiLight('Para1','Para2',HiliteAry1,'hlite1');"/></body>
    <div id="Para2" style="width:600px;height:200px;background-Color:#FFFFCC;border:solid black 1px;" >
    </div>
    </form>
    
    </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/

  • #4
    New Coder
    Join Date
    Mar 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    vwphillips,

    That is fantastic! Thank you so much!

    Is there a way to easily modify your code so that the source material for highlighting is another textbox (in which the person reading the page can type)?

    You are too cool.
    - Luke Muehlhauser


  •  

    Posting Permissions

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