You are here: irt.org | FAQ | JavaScript | Misc | Q1411 [ previous next ]
The following was submitted by Manish Khot and Ranganath Satyan:
This answer explains filtering of arrays using the Regular Expression object in JavaScript. We tap into the powerful pattern matching features provided by the Regular Expression object in order to filter a dataset array at the client side. Once the data is fetched from the data source any number of filters can be applied to the dataset without making trips back to the data source. This feature can be combined with the power of DHTML to enhance user-interactivity.
A regular expression is a pattern describing a set of strings. Regular expressions are built analogously to arithmetic expressions, by using various operators to combine smaller expressions.
For more information on regular expression refer to Mastering Regular Expressions by Jeffrey Fried
the Regular Expression Object in JavaScript has been supported since JavaScript 1.2 and JScript 2.
A regular expression object contains the pattern of a regular expression. It has properties and methods for using that regular expression to find and replace matches in strings.
Here are a few examples of regular expressions:
^A does not match the 'A' in "an A" but does match it in "An A".t$ does not match the 't' in "eater", but does match it in "eat".bo* matches 'boooo' in "A ghost booooed" and 'b' in "A bird warbled", but nothing in "A goat grunted".a+ matches the 'a' in "candy" and all the a's in "caaaaaaandy".e?le? matches the 'el' in "angel" and the 'le' in "angle".The above table is a part of the Netscape Navigator JavaScript RegExp documentation.
In this article we make use of the test method. This method executes the search for a match between a regular expression and a specified string and returns a true or false value.
Let us look into a simple example of how this feature can be used; we use a single dimension array as a test case. The array is populated with a set of strings & numbers, below is the definition of the array.
var v_array = new Array("manish","satyan","123","324","34324","565")
Now, we will filter this array based on a regular expression string,
let us say we need to find out all the elements in the array that end
with the letter n. The regular expression used to
achieve this would be n$. So we will create a new
regular expression object having the value n$.
var v_regexp = new RegExp("n$","gi")
The gi parameters indicate that we want this search to be
global and case insensitive.
We will then iterate through all the elements in the array and apply the test method of v_regexp to each one. Any element for which the test returns true will be copied to the found array.
for ( var i = 0; i < v_array.length; i++ ) {
if ( v_regexp.test(v_array[i]) ) {
v_foundarray[j] = v_array[i]; // Pattern found
j++;
}
}
The resultant found array contains the filtered data and is displayed to the user.
Below is the complete listing of the code:
<script type="text/Javascript"><!--
function filter(el) {
var j = 0;
var strHTML = " ";
var v_foundarray = new Array();
var v_array = new Array("manish","satyan","123","324","34324","565");
var v_regexp = new RegExp(el.value,"gi");
for ( var i = 0; i < v_array.length; i++ ) {
if ( v_regexp.test(v_array[i]) ) {
v_foundarray[j] = v_array[i]; // Pattern found
j++;
}
}
for ( var k = 0; k < v_foundarray.length; k++ ) {
strHTML += v_foundarray[k] + "<br>";
}
if (document.all) {
document.all.vals.innerHTML = strHTML;
}
else if (document.layers) {
document.layers['vals'].document.open();
document.layers['vals'].document.write(strHTML);
document.layers['vals'].document.close();
}
}
//--></script>
<form onSubmit="return false">
<input name="test" type="text"> <input type="button" value="Filter" onClick="filter(this.form.test)">
</form>
<div id="vals" style="position:absolute">
<pre>
</pre>
</div>