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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: Array match

  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Array match

    Hi guys,

    Here is my code:
    Code:
        var WordsArray = new Array();
    		WordsArray[0] = "hello";
    		WordsArray[1] = "bye";
    		WordsArray[2] = "world";
    		WordsArray[3] = "tester";
    		
    	var def = new Array();
    		def[0] = "this is a greeting";
    		def[1] = "this is also a greeting";	
    
    	var words = WordsArray;
    	var define = def;
    
        function preg_quote( str ) {
            return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
        }
    
        function findwords() {
            var s = textbox.value;
    
            for (i=0; i<words.length; i++)
    			s = s.replace( new RegExp( preg_quote( words[i] ), 'gi' ), '<span class="highlight">' + words[i] + '</span>' )
    	        foundwords.innerHTML = s.replace( new RegExp( preg_quote( '\r' ), 'gi' ), '<br>' );
    			
    	}
    So what I want to do and I am struggling to do is try and get the 'definition' of the correct word that is highlighted.

    e.g When the user enters 'hello' in the textbox, 'hello' is highlighted. In the WordsArray, 'hello' has an index value of 0 (WordsArray[0] = hello)

    The definition for this word also has the same index value (def[0] = "this is a greeting").

    What I want to happen is that when the word is highlighted, it outputs also the definition for that word.

    Any help greatly appreciated :)

    p.s Also if anyone can tell me how to get rid of all other words that are not in the array to output. E.g I dont want the word 'goodbye' to be ouputted and highlighted because that word is not in the array. Basically only words in the array that are entered should be highlighted.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Do you mean something like this???

    Not clear just what you wanted to see for the output, so it's a bit of a guess.

    Code:
    var words = {
        "hello" : "this is a greeting",
        "bye"   : "this is not a greeting",
        "world" : "terra firma",
        "tester" : "what you are being now"
    };
    
    var txt = "hello and good bye dear world!";
    var defs = [ ];
    for ( var word in words )
    {
        var re = new RegExp( "(" + word + ")", "ig" );
        if ( re.test(txt) )  
        {
            txt = txt.replace( re, '<span style="color: red;">$1</span>' );
            defs.push( word + ": " + words[word] );
        }
    }
    document.write( txt + "<hr/>" + defs.join("<br/>") + "<hr/>" );
    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
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Not exactly,

    Perhaps it will help to post my index.html:

    Code:
    <html>
    	<head>
    		<style>
        		.highlight { background: yellow; }
    		</style>
    		<script src="wordarray.js"></script>
    	</head>
    
    	<body>
    		<textarea id="textbox" onKeyUp="findwords();"></textarea>
        	<div id="foundwords"></div>
            <div id="definitions_go_here"></div>
    	</body>
    </html>
    So basically I have a box for where the highlighted words is output and a box for where the definition will go. But the problem is, Im not sure how exactly to get the right definition ouputted.

    E.g

    The user enters 'Hello' in text area.

    Beneath the text box 'hello' is outputted and is highlighted. (this part of the program is working.

    The definition of hello should be 'this is a greeting' in the def array.

    Hello and the definition both have the same index value in 2 different arrays.

    Code:
    WordsArray[0] = "hello";
    
    def[0] = "this is a greeting"
    The '[0]' matches them up if that makes sense.

    It's quite difficult to explain what I want but thank you very much for your help.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Can you make a *specific* example?

    That is, show the contents of all 3 parts, as you want them?
    Code:
    Textarea: Hello, my friends.  Hello and goodbye!  I am off to the big wide world. Why in the world would I do this?  Because I want to make money as a software tester.
    
    Foundwords:
    (0) Hello
    (1) Hello
    (2) bye
    (3) world
    (4) world
    (5) tester
    
    Definitions:
    (0) this is a greeting
    (1)  ... etc. ...
    Or what? Do you, for example *NOT* want the words repeated? So that "hello" only appears once?

    Or do you want the words to appear in context?
    Code:
    Foundwords: Hello (0), my friends.  Hello (0) and goodbye(1)!  I am off to the big wide world(2). Why in the world(2) would I do this?  Because I want to make money as a software tester(3).
    Or or or or...

    A picture is worth a thousand words.
    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.

  • #5
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Haha ok.

    Here is an image:
    http://postimage.org/image/s6auxkdmt/

    And you know I don't want the definitons to appear twice even though the word hello is repeated, because that would be just pointless.

    Let me know if that makes sense.


  • #6
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok lol,

    I hope this pic makes sense:
    http://postimage.org/image/s6auxkdmt/

    So the defnitions of those highlighted words, came from another array.

    You have 1 array with words. 1 with definitions.

    These are in order. e.g.

    Words[0] = 'Hello' and def[0] = 'This is a greeting'

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Almost trivial modifications to the code I gave you in post #2. Mostly just integrating my code with your <form> and your <div>s.

    Code:
    <html>
    <body>
    <form id="theForm">
    Enter some text:<br/>
       <textarea name="theText" cols="80" rows="10">
       Hello, my friends.  Hello and goodbye!  I am off to the big wide world. 
       Why in the world would I do this?  
       Because I want to make money as a software tester.
       </textarea>
    <br/>
    <input type="button" name="doit" value="Show the definitions"/>
    </form>
    Highlighted: 
    <div id="showit" style="border: solid blue 3px; width: 400px;"></div>
    <br/>
    Definitions:
    <div id="defs" style="border: solid blue 3px; width: 400px;"></div>
    
    
    
    <script type="text/javascript">
    (
      function( )
      {
          var words = {
            "hello" : "this is a greeting",
            "bye"   : "this is not a greeting",
            "world" : "terra firma",
            "tester" : "what you are being now"
          };
    
          var f = document.getElementById("theForm");
          f.doit.onclick = showAll;
    
          function showAll( )
          {
              var txt = f.theText.value.replace(/\n/g,"<br/>\n");
    
              var defs = [ ];
              for ( var word in words )
              {
                  var re = new RegExp( "(" + word + ")", "ig" );
                  if ( re.test(txt) )  
                  {
                      txt = txt.replace( re, '<span style="background-color: yellow;">$1</span>' );
                      defs.push( word + ": '" + words[word] + "'" );
                  }
              }
              document.getElementById("showit").innerHTML = txt;
              document.getElementById("defs").innerHTML = defs.join("<br/>");
          }     
      }
    )( );
    </script>
    </body>
    </html>
    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.

  • Users who have thanked Old Pedant for this post:

    TheFlowFX (11-20-2012)

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,618
    Thanks
    0
    Thanked 645 Times in 635 Posts
    That form would be more user friendly if it were updated to use something a bit more modern than HTML 3.2.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    The whole thing could be more user-friendly and prettier and and and...

    I just showed a bare minimum web page, just enough to support the JavaScript code I demoed/created. I figure he can make it prettier.
    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.

  • #10
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Brilliant!

    Thank you so much

  • #11
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation

    Quote Originally Posted by Old Pedant View Post
    Almost trivial modifications to the code I gave you in post #2. Mostly just integrating my code with your <form> and your <div>s.

    Code:
    <html>
    <body>
    <form id="theForm">
    Enter some text:<br/>
       <textarea name="theText" cols="80" rows="10">
       Hello, my friends.  Hello and goodbye!  I am off to the big wide world. 
       Why in the world would I do this?  
       Because I want to make money as a software tester.
       </textarea>
    <br/>
    <input type="button" name="doit" value="Show the definitions"/>
    </form>
    Highlighted: 
    <div id="showit" style="border: solid blue 3px; width: 400px;"></div>
    <br/>
    Definitions:
    <div id="defs" style="border: solid blue 3px; width: 400px;"></div>
    
    
    
    <script type="text/javascript">
    (
      function( )
      {
          var words = {
            "hello" : "this is a greeting",
            "bye"   : "this is not a greeting",
            "world" : "terra firma",
            "tester" : "what you are being now"
          };
    
          var f = document.getElementById("theForm");
          f.doit.onclick = showAll;
    
          function showAll( )
          {
              var txt = f.theText.value.replace(/\n/g,"<br/>\n");
    
              var defs = [ ];
              for ( var word in words )
              {
                  var re = new RegExp( "(" + word + ")", "ig" );
                  if ( re.test(txt) )  
                  {
                      txt = txt.replace( re, '<span style="background-color: yellow;">$1</span>' );
                      defs.push( word + ": '" + words[word] + "'" );
                  }
              }
              document.getElementById("showit").innerHTML = txt;
              document.getElementById("defs").innerHTML = defs.join("<br/>");
          }     
      }
    )( );
    </script>
    </body>
    </html>
    Hi again,

    There is a problem I have discovered with the coding, Im not sure if it's major or minor, but here it is:

    I have these 2 words in my words variable:
    var words = {
    "arm" : "part of your body",
    "armchair" : "this is a piece of furniture"

    Now the problem is, when I click the submit buttons, 'arm' is highlighted within 'armchair', and therefore only the meaning for 'arm' is shown and not 'armchair'.

    IMAGE HERE

    How can I fix this?

    thanks.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Trivial: Put "armchair" *BEFORE* "arm" in the list.

    Same with anything similar. Make sure the LONGER thing you want to find appears before the shorter one(s) if the shorter one(s) are contained within the longer one.

    NOW....

    As the code is written, *BOTH* "armchair" and "arm" will be found, even with the longer one first.

    If you don't like that, we could fix it by not allowing a word to be found if it is already contained in a <span>...</span>. More complicated, but doable.
    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.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    There's probably a simpler way to do this, but this was the first thing I thought of, and it worked:
    Code:
    <html>
    <body>
    <form id="theForm">
    Enter some text:<br/>
       <textarea name="theText" cols="80" rows="10">
       Hello, my friends.  Hello and goodbye!  I am off to the big wide world. 
       Why in the world would I do this?  
       Because I want to make money as a software tester and rest in a big fat armchair.
       </textarea>
    <br/>
    <input type="button" name="doit" value="Show the definitions"/>
    </form>
    Highlighted: 
    <div id="showit" style="border: solid blue 3px; width: 400px;"></div>
    <br/>
    Definitions:
    <div id="defs" style="border: solid blue 3px; width: 400px;"></div>
    
    
    
    <script type="text/javascript">
    (
      function( )
      {
          var words = {
            "armchair" : "something to sit in",
            "arm"   : "connects your hand to your body",
            "hello" : "this is a greeting",
            "bye"   : "this is not a greeting",
            "world" : "terra firma",
            "tester" : "what you are being now"
          };
    
          var f = document.getElementById("theForm");
          f.doit.onclick = showAll;
    
          function showAll( )
          {
              var txt = "</span>" + f.theText.value.replace(/\n/g,"<br/>\n") + "<span>";
    
              var defs = [ ];
              for ( var word in words )
              {
                  var re = new RegExp( "(\\<\\/span\>[\\s\\S]*?)(" + word + ")([\\s\\S]*?\\<span)", "ig" );
                  if ( re.test(txt) )  
                  {
                      txt = txt.replace( re, '$1<span style="background-color: yellow;">$2</span>$3' );
                      defs.push( word + ": '" + words[word] + "'" );
                  }
              }
              txt = txt.substring(7);
              txt = txt.substring(0,txt.length-6);
              document.getElementById("showit").innerHTML = txt;
              document.getElementById("defs").innerHTML = defs.join("<br/>");
          }     
      }
    )( );
    </script>
    </body>
    </html>
    Notice that it *DOES* find "armchair" but NOT "arm".

    Add the word "harming" into the text and look what happens.

    But it just occurred to me that may you only want to find *WHOLE WORDS*, so you don't want to find "arm" inside of "harming".

    If that's so, it's much easier. BUT... But then you won't even find FORMs of words.

    For example, you would not find "arms" if you listed "arm" in your dictionary of words.

    So it's feast or famine. You decide.
    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.

  • #14
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Oh right. Darn.

    Well Yh I tried again and I see what you mean. In my var word I have "Cat" : "an animal";

    and when the user types for example "loCATion", it pops up the definiton for cat.

    So I think I'll be happy with the second suggestion. I wouldn't mind if 'Arms' doesnt come up but 'Arm' itself does.

    I really dont want words being highlighted for no reason.

    So how do you go about on doing this? aka what is the easier option?

  • #15
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    bUMP bump


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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