Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
TheFlowFX
Posts: 166
Registered: ‎02-15-2012
My Carrier: Bags are useful

Javascript Help - Text search

So here is the code to start with:

<html>
<body>
<form id="theForm">
Enter some text:<br/>
   <textarea name="theText" cols="80" rows="10">
   </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",
        "world" : "terra firma",
        "tester" : "what im doing 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] + "'" );
              }
          }
          document.getElementById("showit").innerHTML = txt;
          document.getElementById("defs").innerHTML = defs.join("<br/>");
      }     
  }
)( );
</script>
</body>
</html>

 

Now what this does is the user enters some text in the textbox, then in a div it shows the text with highlighted words. These highlighted words are from my word variable. And underneath the div I have another one that will show the definition of these words.

 

Give the code a go if you dont understand :smileyhappy:

 

So the problem is when the user puts in 'harming', 'arm' is highlighted and it will show the definition for 'arm'. But I dont want this to happen. 

 

E.g Location has the word 'Cat' inside it (loCATion), now if If 'Cat' is in my variable then it would highlight it and show the definiton for it.

 

Any solution?

 

Regards,

Flow

 

If any post helps you please click the Like Button below the post(s) that helped you.
2. Please resolve your thread by marking the post "Solution?" which solved it for you!

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,453
Registered: ‎04-12-2010
My Carrier: Bell

Re: Javascript Help - Text search

This seems to mostly be a matter of regular expression matching which, unfortunately, is not one of my strong suits.

There are ways to split the string using JavaScript (by spaces) and check for matches there, though that doesn't account for special characters and isn't as elegant as regex.

Perhaps there is a way to check that the characters before/after the match aren't letters with a regex?

Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.