Searching Body Text with textRange, part 1: The Basic Script - Some Material to Search
(Page 3 of 5 )
Regardless of which scripting language you choose to use, you're going to need a Web page that holds the text you wish to be able to search through, and the buttons that generate the input-accepting dialog box. Any page that has a large amount of text on it will benefit from this type of search capability. For this example, I've used an extract from the script of the latest Star Wars movie (obtained with thanks and appreciation from the excellent http://galacticempire.co.uk/). Create the following page in a text editor:
<html>
<head>
<title>Finding Text</title>
</head>
<body>
<h1>Finding Text</h1>
<hr>
<center>
<table spacing="2">
<tr><td><button id=buttonSearch title="Click to search for a word" onclick="textSearch()">Find...</button></td>
</table>
</center>
<p><h3>1) EXT. SPACE</h3>
A long time ago in a galaxy far, far away...<br/>
A vast sea of stars serves as the backdrop for the Main Title, followed by a rollup, which crawls into infinity.<br/><br/>
War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.<br/>
In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.<br/>
As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor...<br/>
Pan down to reveal a Republic attack cruiser. Continue to pan with the Cruiser as two Jedi starfighters enter and head toward an enemy Battle Cruiser. Truck with the Jedi Fighters as they manoeuvre in unison, dodging flack and enemy laser fire. R2-D2 is on Anakin's ship. R4-P17 is on Obi-Wan's ship. A giant space battle is revealed as the tiny Jedi ships continue their assault in a synchronous ballet.</p>
<p><h3>2) INT. OBI-WAN'S STARFIGHTER COCKPIT-SPACE</h3>
Obi-Wan bounces through the flack with a frown. His ship rocks violently.</p>
<p><h3>3) INT. ANAKINS STARFIGHTER COCKPIT-SPACE</h3>
Anakin smiles as he blasts a Trade Federation droid drop fighter.<br/>
<em>ANAKIN:</em> There isn't a droid made that can out fly you, Master, and no other way to get to the Chancellor...<br/>
<em>OBI-WAN:</em> Look out, four droids inbound...</p>
<p><h3>4) EXT. CORUSCANT-SPACEBATTLE</h3>
The two Jedi fighters swerve in unison as four Trade Federation droid drop fighters attack. After several clever moves by the Jedi, two of the Federation droid drop fighters collide with each other in a ball of flame.</p>
<p><h3>5) INT. OBI-WAN'S STARFIGHTER COCKPIT-SPACE</h3>
Obi-Wan struggles to maintain control of his ship.<br/>
<em>OBI-WAN:</em> We've got to split them up.<br/>
<em>ANAKIN:</em> Break left, fly through the guns on that tower.<br/>
Obi-Wan flies to the left of a huge tower on a Republic cruiser. The two droid drop fighters follow.<br/>
<em>OBI-WAN:</em> Easy for you to say...why am I always the bait?<br/>
<em>ANAKIN:</em> Don't worry. I'm coming around behind you.<br/>
Obi-Wan deftly maneuvers around a large Starship's superstructure, but the two droid fighters stay on his tail, blasting him with intense laser fire.<br/>
<em>OBI-WAN:</em> Anakin, they're all over me!<br/>
<em>ANAKIN:</em> Dead ahead! Closing...lock onto him, Artoo...<br/>
R2 beeps his reply as Anakin swoops in for the kill. Anakin blasts one of the droid drop fighters. It explodes.<br/>
<em>ANAKIN:</em>(continuing, laughs) We got him, Artoo!<br/>
Anakin blasts away at the second droid drop fighter as R2 beeps an angry warning.<br/>
<em>ANAKIN:</em> I copy, Artoo.<br/>
<em>OBI-WAN:</em> I'm going down on the deck.<br/>
<em>ANAKIN:</em> Good idea...I need some room to maneuver.<br/>
Obi-Wan dives toward the surface of one of the larger Trade Federation battleships and is forced to fly through a maelstrom of laser flack. He skims the surface, followed by the droid drop fighter, which is followed by Anakin.<br/>
<em>ANAKIN:</em>(continuing) Cut right. Do you hear me?! Cut right. Don't let him get a handle on you. Come on, Artoo, lock on! Lock on!<br/>
R2 beeps. The crosshairs merge on the droid drop fighter.<br/>
<em>OBI-WAN:</em> Hurry up! I don't like this!<br/>
Obi-Wan flies through a narrow gap between two towers on a Battleship. The droid drop fighter hits one of Obi-Wan's wings with a laser blast, and parts of the ship go flying around Obi-Wan's Astro Droid, R4.<br/>
<em>OBI-WAN:</em>(continuing) Ouch!<br/>
R4 BEEPS a blue streak.<br/>
<em>OBI-WAN:</em>(continuing) Don't even try to fix it, Arfour. I've shut it down.<br/>
<em>ANAKIN:</em> We're locked on ... we've got him...<br/>
Anakin drops in behind the droid drop fighter and blows him apart. R2 squeals with delight.<br/>
<em>ANAKIN:</em>(continuing) Yeah! We got him...good going, Artoo.<br/>
<em>OBI-WAN:</em> Next time you're the bait...Now let's find the Command Ship and get on with it...<br/>
R-4 BEEPS a blue streak.<br/>
<em>ANAKIN:</em> Lock onto them, Artoo. Master, General Grievous's ship is directly ahead.<br/>
R2 beeps a reply, and it reads out in Anakin's cockpit.<br/>
<em>ANAKIN:</em>(continuing) The one crawling with vulture droids.</p>
<p><h3>6) INT. OBI-WAN'S STARFIGHTER COCKPIT-SPACE</h3>
<em>OBI-WAN:</em> I see it. Oh, this is going to be easy.<br/>
Ahead is a Trade Federation cruiser with batlike droid vulture fighters stalking around on the hull. The vulture fighters transform into flight configuration, lift off the cruiser, and attack the Jedi starfighters.</p>
</body>
</html>
Save this as findingtext.htm. It may seem a little over the top, but you need a decent sized chunk of body text to see the real benefits of this capability. You don’t need to place the button in a table, but in the second article the reason why will become apparent. Actually, the table element should not be used to handle the positioning of elements at all; this should be managed by CSS, but it provides a quick and easy solution without the article heading off on a tangent.
As far as your HTML page goes, this is pretty much it; all you need is to include a call to the script file in the head of the document, which you can add once the JavaScript or VBScript file has been completed. Keeping your script out of the main document to create a separate behavior layer is the way forward as far as application, be that Web or desktop, design is concerned. Get into the habit of doing it now! A presentation layer (consisting of any stylesheets used by the main page) if desired, can also be included, but will not be discussed in this article.
Next: Coding the Script File >>
More Code Examples Articles
More By Dan Wellman
