Search A TextArea And Then Go TO Result Or Highlight

[JustinK101]

I have a large textarea with a large amount of text.

I want to be able to put a text search string in a textfield and click 'Search' and have javascript try and find my search string in the large textarea.

If the string was not found in the textarea pop up an Alert("Search value not found."). If the string was found locate the first instance and go to that instance in the textarea, if possible highlight it.

How hard would a findnext be to implement?

This sound hard to me.

 

[theniteowl]

Searching in the value of a textarea is easy, the tricky part is setting the cursor position in the textarea. Google javascript position cursor textarea

Get that part working and the rest is easy.
What you will NOT be able to do is to highlight the matching text as you cannot control the font or color of select portions of text in input fields.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[JustinK101]

theniteowl:

Is there a way to select, like you know when you select text with your mouse, the found string?

Also, how hard will a findnext be. Basically I want it to function with a single textbox and a single button Search, and you can click the button Search and it acts as a find next, you can keep clicking Search to keep getting results until it reaches the end of the textarea.

 

[JustinK101]

Also, I have been searching google and not been able to find code to first search a textarea via a textfield, and second to position the cursor. I tired the search you recommended.

 

[theniteowl]

You can highlight just a portion of text in a text box in IE by using a text range you create using a method called createTextRange(). There are other methods that apply to the text range to allow you to set where the highlighting occurs.

For Mozilla browsers you will need to look into setSelectionRange().

Probably an easier way to do this though is to not use a real text box since they are limited on how you can alter the text.
Instead you could create a div with styles applied so that it LOOKS like a textarea. Then you can use innerHTML to alter the text inside of that box when you do the search including the alternation of font, color and highlighting of just the text you want to alter. Essentially you can use any HTML formatting in that area which you cannot do in a true text input or textarea field.


It's hard to think outside the box when I'm trapped in a cubicle.