using jquery or javascript

I have this code in my page. with two textboxes and one textarea.

<fieldset>
    <legend><b>Search Criteria</b></legend>
    <table>
        <tr>
            <td>                
                Find Text: 
                <input type="text" style="width:150px" id="txtFind"/>
                <input type="button" id="btnfind" value=" Find "/>                           
            </td>
        </tr>
        <tr>
            <td>
                Replace Text: 
                <input type="text" style="width:150px" id="Text1"/>
                <input type="button" value="Replace Text" id="btnReplace"/>
            </td>
        </tr>
    </table>
</fieldset>
<br />
<fieldset>
    <legend><b>Result</b></legend>
    <table>
        <tr>
            <td>    
                <%:Html.TextArea("Hello ASP.NET here")%>
            </td>
        </tr>
    </table>
</fieldset>

in my first textbox 开发者_开发知识库if I enter "here" then I click the Find button it should find the text

if I enter "MVC" on second text box click Replace Text button it should replace the text "here" to "MVC" ("Hello ASP.NET MVC").,

Please can any one help me out? How to do this with javascript or jquery?

Thanks

Asuming your textarea has id="textarea", you should do this:

$("#btnfind").click(function(){   
   var find = $("#txtFind").val();
   var replace = $("Text1").val(); 
   var text = $("#textarea").val();
   while(text.indexOf(find) >= 0){
      text = text.replace(find, replace);
   }
   $("#textarea").val(text);
});

(Note that we're not using Regular expressions to replace because the text to find is dynamic so we'd have to escape the 'find' text).

Hope this helps. Cheers

this should get you started: http://jsfiddle.net/DD7t5/

using jQuery and a highlight jQuery plugin

var $result = $('#result'),
    $txtFind = $('#txtFind'),
    $txtReplace = $('#txtReplace');

$('#btnFind').click(function() {
    $result.removeHighlight();

    var findValue = $txtFind.val();

    if (findValue.length > 0) {
        $result.highlight(findValue) // find and highlight
    }
});

$('#btnReplace').click(function() {
    $result.text($result.text().replace(eval('/' + $txtFind.val() + '/gi'), 
        $txtReplace.val())); // replace
});