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 to the CF scene
    Join Date
    Dec 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with an array?

    (cue bouncy piano rendition of "If I Only Had A Brain".......)

    I have a style:

    Code:
    .red1{background-color:red;}
    and a function which, when called, highlights certain keywords in an
    HTML document:

    Code:
    function hiFruit() {
    	xx=document.body.innerHTML;
    	yy=xx.replace(/apple/gi,'<span class=red1>apple</span>')
    		.replace(/orange/gi,'<span class=red1>orange</span>')
    		.replace(/banana/gi,'<span class=red1>banana</span>');
    	xx=yy;
    	document.body.innerHTML=xx;
    	void 0
    	}
    I have to assume, from my *very* limited understanding of javascript,
    that the above function could handle a fairly large number of keywords
    much more efficiently --- *if* I pulled the keywords from an array.

    I'm hoping that, in your near-infinite mercy for fellow seekers just
    starting out on the JS path, you could provide some simple example of
    such an array as it applies to this specific type of situation.

    And, just so you know, this isn't homework, I haven't been a student for
    60 years, I don't even have a website. I'm just an old guy trying to pass
    some long nights self-teaching himself a little scripting so he can build
    some little toys to run in his browser.

    And I would be grateful for *any* input. I grasp the general *idea* of
    arrays, but...... well, apparently, it IS hard to teach an old dog new tricks.

    (But, man, this javascript stuff sure is FUN!)

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Actually, the most efficient way to do this is to build a *single* regexp to do it:
    Code:
    yy = xx.replace(/(apple|orange|banana)/gi, '<span class="red1">$1</span>');
    So you could just put all your words into a long string with | separators:
    Code:
    var words = "apple|orange|banana";
    var re = new RegExp( "(" + words + ")", "gi" );
    yy = xx.replace( re,  '<span class="red1">$1</span>');
    or you could simply join from an array:
    Code:
    var words = ["apple","orange","banana"];
    var re = new RegExp( "(" + words.join("|") + ")", "gi" );
    yy = xx.replace( re,  '<span class="red1">$1</span>');
    So pick your poison.

    Now a question for you: What the heck is
    Code:
         void 0
    ????

    Code:
    // possible final version?
    var words = ["apple","orange","banana"]; // could build this up by reading from a file, maybe?
    
    function hiFruit() {
        var re = new RegExp("(" + words.join("|") + ")", "gi" );
        document.body.innerHTML = 
            document.body.innerHTML.replace(re,'<span class="red1">$1</span>');
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    seems to work ?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <script>
    function init(){
    	xx=document.body.innerHTML;
    	yy=xx.replace(/apple/gi,'<span class=red1>apple</span>')
    		.replace(/orange/gi,'<span class=red1>orange</span>')
    		.replace(/banana/gi,'<span class=red1>banana</span>');
    	xx=yy;
    	document.body.innerHTML=xx;
    	void 0// what's this for ?
    }
    </script>
    <style>
    .red1{background-color:red}
    </style>
    </head>
    <body onload="init()">
    
    <div id="container">
    
    	banana orange avacado
    </body></html>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Oh, Davey! That will *NEVER* work.

    There's no such thing as "avacado".

    It's "avOcado".

    <snicker/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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