Question

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

Answer 1

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
});