...

View Full Version : Array match



TheFlowFX
11-19-2012, 10:10 PM
Hi guys,

Here is my 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.

Old Pedant
11-19-2012, 10:38 PM
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.



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/>" );

TheFlowFX
11-19-2012, 11:54 PM
Not exactly,

Perhaps it will help to post my index.html:



<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.



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.

Old Pedant
11-20-2012, 12:16 AM
Can you make a *specific* example?

That is, show the contents of all 3 parts, as you want them?


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?


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.

TheFlowFX
11-20-2012, 12:31 AM
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.

:)

TheFlowFX
11-20-2012, 12:43 AM
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'

Old Pedant
11-20-2012, 01:15 AM
Almost trivial modifications to the code I gave you in post #2. Mostly just integrating my code with your <form> and your <div>s.



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

felgall
11-20-2012, 01:21 AM
That form would be more user friendly if it were updated to use something a bit more modern than HTML 3.2.

Old Pedant
11-20-2012, 01:30 AM
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.

TheFlowFX
11-20-2012, 01:48 PM
Brilliant!

Thank you so much :D

TheFlowFX
11-22-2012, 11:16 PM
Almost trivial modifications to the code I gave you in post #2. Mostly just integrating my code with your <form> and your <div>s.



<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 (http://postimage.org/image/i62n1lr71/)

How can I fix this?

thanks.

Old Pedant
11-23-2012, 05:33 AM
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.

Old Pedant
11-23-2012, 05:56 AM
There's probably a simpler way to do this, but this was the first thing I thought of, and it worked:


<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.

TheFlowFX
11-24-2012, 12:29 PM
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?

TheFlowFX
11-25-2012, 06:50 PM
bUMP bump

Starman52978
11-25-2012, 06:56 PM
To All who post on the forum, I have someone looking for a programmer/coder and needs work done on a job. a Sam4s sps-2000 is what need the programming.

Starman52978
11-25-2012, 07:04 PM
Need of a programmer/coder that knows his/her way around a Sam4s sps-2000. This is a by the job payment. Are there any freelancer's that are needing some work?

TheFlowFX
11-26-2012, 08:32 AM
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?

Startman please dont just spam lol

Old Pedant
11-26-2012, 08:51 PM
So I think I'll be happy with the second suggestion. I wouldn't mind if 'Arms' doesnt come up but 'Arm' itself does.


Trivial, then. Regular expressions have a builtin way of finding word boundaries: \b



<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 my arm 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 = {
"arm" : "connects your hand to your body",
"armchair" : "something to sit in",
"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( "(\\b" + word + "\\b)", "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>

NOTE: If you WANTED to, you could find both "arm" and "arms".

Just means setting up your "dictionary" carefully. Example:


var words = {
"arm(s)?" : "connects your hand to your body",
"armchair(s)?" : "something to sit in",
...

Now the part in parentheses (followed by a question mark) becomes optional. So you get a match on either "arm" or "arms".

You can go further:


var words = {
"arm(s|ed|ing)?" : "connects your hand to your body",
...

So now "arm" or "arms" or "arming" will match.

And so on.

How about:


var words = {
"(sofa|divan|loveseat|couch)" : "something more than one person can sit on",
...

Or plurals. couch need "es", the others just need "s":


var words = {
"(sofa(s)?|divan(s)?|loveseat(s)?|couch(es)?)" : "something more than one person can sit on",
...


Okay?

TheFlowFX
11-26-2012, 09:03 PM
:D

Thank You SO MUCH <3

This works great.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum