How to Manipulate and Search JavaScript Strings to Program with HTML

In JavaScript, strings are what most humans equate to computer data because people see output onscreen as strings. Fortunately, JavaScript provides a wealth of ways in which to interact with strings.

How to manipulate and search strings in JavaScript

Many string searches are simple. A user looks for a particular word or other data in a string, and your application finds it. The following example shows one technique for performing a simple search.

<script language="JavaScript">
  // Define a global search string.
  var SearchString = "This is the search string!"
  function FindString()
  {
   // Obtain the value the user wants to find.
   var FindValue =
     document.getElementById("SearchString").value;
   // Perform the search.
   var Result = SearchString.indexOf(FindValue);
  
   // Display an appropriate result.
   // Check for a blank input first.
   if (Result == 0)
   {
     document.getElementById("Result").innerHTML =
      "You must provide an input value!";
   }
  
   // Check for a result that doesn't exist next.
   else if (Result == -1)
   {
     document.getElementById("Result").innerHTML =
      "The search string doesn't exist.";
   }
  
   // Display the location information.
   else
   {
     document.getElementById("Result").innerHTML =
      'The search string "' + FindValue +
      '" appears at character ' + Result;
   }
  }
</script>

In this example, the code begins by creating a global variable that contains a search string the user can interact with. You could change this string to anything you want for experimentation purposes.

The FindString() function is connected to the Find It button. The first task is to obtain the value that the user wants to find and place it in FindValue. The example then uses the indexOf() function on SearchString to locate FindValue and place the position in Result.

image0.jpg

The second task is to interpret the results. The example looks for one of three values in Result. When Result is 0, the user hasn’t provided any input, and the example asks the user to provide some. When Result is –1, the user has supplied a search string that doesn’t appear in the original string, and the example lets the user know that the search string wasn’t found.

When Result is a positive value, the application displays the position of the search string in the original string onscreen.

How to work with regular expressions in JavaScript

Not all searches are simple. Sometimes a user needs to perform a complex search based in a regular expression — one in which there are wildcard search terms. The following example shows a simple way to implement such a search.

<script language="JavaScript">
  // Define a global search string.
  var SearchString =
   "Use a regular expression to search a string!"
 
  function FindString()
  {
   // Obtain the value the user wants to find.
   var FindValue =
     document.getElementById("SearchString").value;
  
   // Obtain the modifiers the user wants to use.
   var Modifiers =
     document.getElementById("Modifiers").value;
    
   // Create a search pattern.
   var Pattern = new RegExp(FindValue, Modifiers);
    
   // Perform the search.
   document.getElementById("Result").innerHTML =
     SearchString.match(Pattern);
  }
</script>

The example begins by defining a global search string. It then defines the FindString() function that’s used to perform the actual search. Compare this version of FindString() with the FindString() function you see they have some similarities, but that this version’s much shorter (even though it’s far more flexible).

The FindString() function obtains the search string and places it in FindValue. It then obtains any search modifiers and places them in Modifiers. The example creates a new RegExp object, Pattern, that’s a combination of the search string and search modifiers.

At this point, the code uses the match() function on SearchString to produce a result. The output is actually an array of values that you could use to locate each incidence of the search term in the search string. The array elements appear onscreen separated by commas.

Notice that this search uses a bracketed regular expression for input. In addition, the search modifiers appear in the second field after the search expression. This example is fully capable of using any combination of regular expression elements, so try various combinations to see how they work for you.

image1.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.