Technically we deal here with "string manipulation".


Enter text below and at someplace insert the symbol [x].


Now enter the word you want to replace it with here:



and see the results here:


The HTML code for the above is:

Enter text below and at someplace insert the symbol [x].<BR><FORM> <TEXTAREA NAME="enter" ROWS=5 COLS=50 WRAP=Virtual></TEXTAREA><BR> <BR> Now enter the word you want to replace it with here:<BR> <BR> <INPUT NAME="replace" TYPE=Text SIZE="15"><BR> <BR> <INPUT TYPE=Button VALUE="run it" onClick="replace1(this.form)"> and see the results here:<BR> <BR><TEXTAREA NAME="see" ROWS=5 COLS=50 WRAP=Virtual></TEXTAREA></form>

and the JavaScript function is:

function replace1(obj){ var text=obj.enter.value var text2=text.split("[x]") obj.see.value=text2[0]+obj.replace.value+text2[1] }

This function first defines a variable "text" to equal what the user types into the first text box.

var text=obj.enter.value

It then uses the split tool to break it into two parts.

The part which comes before [x] and that which follows.

var text2=text.split("[x]")

Thus the variable "text2" has two parts (technically it is called an "array") , the first, text[0] and the second, text[1]. Finally , the replacement word is inserted in between the two pieces and stored in the output window.

obj.see.value=text2[0]+obj.replace.value+text2[1]

Caution: The function name used here is "replace1()" if wehad used "replace()" instead we would have generated an error in, at least, some browsers. The function name can not be the same as any of the form elements, that is, the same as <INPUT NAME="replace" TYPE=Text SIZE="15">, in this case.
What we have done here is a simple "mail merge". What if there are more than one occurrence of the search word (in this case [x], but, it can be anything)? The situation becomes more complicated.

There are many ways this might be done. Here is one:

function replace2(obj){ //============================== text=obj.enter.value var text2=text.split("[x]") //============================== // Just like before //============================== if(text2.length==1){ //============================== // We check to see if the array has only one element, "length" is the // number of elements in the array text2. If it has only one element // that means the search term did not occur. //=============================== obj.see.value=text2[0]} //=============================== // Set the output window equal to the only element of text2 // which will be the same as the input window in this case //============================== else{for(var i=0;i<=(text2.length-2);i++){obj.see.value+=text2[i]+obj.replace.value} //============================== // If the array has length greater than 1 we use a "for" statement // which has the form "for(start here;keep going to you get here;increment by // one each time){Doing this each time}" // we let the variable "i" count for us starting at 0,test2[0] will contain // the text to the left of the first occurrence of [x]. The first // time through we add to that the replacement word and the text to // the right of the first occurrence. The symbol "+=" means add what is // on the right to what is already on the left. The second time // through we repeat the procedure for the second occurrence. // We repeat this until we reach the last occurrence. //============================== obj.see.value+=text2[text2.length-1]} //============================== // We add the value to the right of the last occurrence // to the output window. (Remember that the last index of the array, // the [] following the "name." of the array, is one less // than the length because the index starts at 0.) }

Enter text below and insert the symbol [x] in several places.


Now enter the word you want to replace it with here:



and see the results here:





You can use these same techniques to perform searches. The JavaScript driven search engine below searches the famous [ infamous |notorious ] short story "The Lady and the Tiger" by Frank Stockton. As presently configured it will tell you whether a word or part of a word occurs in the story and, if so, it returns the sentence with the first occurrence of that word. Try it out!
Search Word: 
 Output: 

You probably are wondering where is the story that is being searched? If you view source you will find out that it is in hidden form field,<INPUT NAME="lady" TYPE=Hidden>. That is one of the "problems" with this approach to searching, in affect, you have to send your "database" along with the search tool. In that sense this is more of a power index. None-the-less, it can be quite useful. Caution: Windows 3.1 users will have a problem if the document reaches close to 64K.

The HTML code used above is:
<FORM> Search Word <SMALL>(four or more letters)</SMALL>:&nbsp;<INPUT NAME="look" TYPE=Text><BR> <INPUT TYPE=Button VALUE="search" onClick="search2(this.form)">&nbsp;Output:&nbsp;<TEXTAREA NAME="output" ROWS=5 COLS=70 WRAP=Virtual></TEXTAREA> <INPUT NAME="lady" TYPE=Hidden value="full text goes here"></FORM> (Note: To use this approach you must replace any " which occurs in the search text with a '.)
The JavaScript code with documentation follows:
function search2(obj){ //=========================== text=obj.look.value //=========================== // Sets the variable "text" equal to the search word. //=========================== if(text.length<=3){ alert("You must use words of four or more letters") //=========================== // checks to make sure that the search word has four or more letters. //=========================== }else{ text2=obj.lady.value var cnt=text2.indexOf(text,0)+1 if(cnt==0){alert("No occurrence of that word") //=========================== // If the word has four or more letters text2 is set equal to // the hidden text.The next step "text2.indexOf(text,0)" searches the variable // "text2" for the first occurrence of the search term "text" starting at the // beginning "0". If "test" does not occur in "test2" a "-1" is returned. // In which case the user is notified that the word does not occur in // the short story. //=========================== }else{ //=========================== // Proceed because the word has more than three letters and occurs in the // document. //========================= var strg=text2.split(text) //========================= // Create an array "strg[]" whose first element, strg[0], is all the // text that occurs before the first occurrence of the search term, and // whose second term, strg[1], contains the text that occurs after // the first occurrence and before the second occurrence //========================== var strg2=strg[0].split(".") //========================== // Takes the first term, strg[0], and splits it into sentences and the part // sentence which proceeds the first occurrence. //========================== var strg3=strg[1].split(".") //========================== // Takes the second term, strg[1], and splits into the part sentence // that follows the first occurrence of the search term and subsequent // sentences. //========================== obj.output.value=strg2[strg2.length-1]+text+strg3[0]+"."} //========================== // Adds the sentence fragment proceeding the search word to the // search word and appends the sentence fragment following the // search word; adding then a period. } } Of course, this would need to be further developed to be really useful. You would want to add the provission for searching for and returning multiple occurrences. This is not a difficult extension. Also it would be useful to return to the user the location of the found sentence. That would be relatively easy.

Next lesson: Images and Other Things

© Carl Adler 1997