Thursday, 22 November 2012

Replace Selected Text in a Textbox Using Javascript


Replace Selected Text in a Textbox Using Javascript


The following code snippet demonstrates how to get the selected text from a Text box and then replace it with some different text using JavaScript.

The following code snippet gets the selected text only from the Text box and then this text is processed and updated to the text box.

<script type="text/javascript">

    function formatselection() {

        var textbox = document.getElementById('inputTextBox');
        var textSelected;
        var formattedText;

        if (document.selection != undefined) {//IE

            textbox.focus();
            var sel = document.selection.createRange();
            textSelected = sel.text;
        }
        else if (textbox.selectionStart != undefined) {//Mozilla

            var startSelPos = textbox.selectionStart;
            var endSelPos = textbox.selectionEnd;
            textSelected = textbox.value.substring(startSelPos, endSelPos);
        }

        if (textSelected != null && textSelected != "") {

            formattedText = textSelected.replace(new RegExp("a", 'g'), "b");

            var finaltext = textbox.value;
            finaltext = finaltext.replace(textSelected, formattedText);

            document.getElementById('inputTextBox').value = finaltext;
        }
    }
</script>



The above function replaces all a’s in the selected text with b’s.
The above code uses two ways to get the selected text. The two methods are for different browsers;Mozilla, IE.
Here is a demo code:


<html>
<title>Format</title>
<head>
<script type="text/javascript">

    function formatselection() {

        var textbox = document.getElementById('inputTextBox');
        var textSelected;
        var formattedText;

        if (document.selection != undefined) {//IE

            textbox.focus();
            var sel = document.selection.createRange();
            textSelected = sel.text;
        }
        else if (textbox.selectionStart != undefined) {//Mozilla

            var startSelPos = textbox.selectionStart;
            var endSelPos = textbox.selectionEnd;
            textSelected = textbox.value.substring(startSelPos, endSelPos);
        }

        if (textSelected != null && textSelected != "") {

            formattedText = textSelected.replace(new RegExp("a", 'g'), "b");

            var finaltext = textbox.value;
            finaltext = finaltext.replace(textSelected, formattedText);

            document.getElementById('inputTextBox').value = finaltext;
        }
    }
</script>
</head>
<body>
<div>
        <hr color="orangered" style="height: 1px;"/>

        <h1 style="color: navy; font-size: 20px;">Format your resouce code</h1>

        <table>
        <tbody>
         <tr>
            <td valign="TOP">
                <b>Enter text:</b>
                <br/>
                <input type="textarea" style="height: 251px; width: 737px;" 
               id="inputTextBox" cols="20" rows="2" name="inputTextBox"/><br/>
            </td>

        </tr>
        <tr>
            <td valign="TOP">
                Select some text and then Hit on Format button.
               All a's in selected text will be converted to b's
                <br/><br/>
                <input type="submit" id="btnFormatToHTML" value="Replace" 
                 name="btnFormatToHTML" OnClick="formatselection()"/>
                  <br/>
                <br/>

            </td>
            <td valign="TOP">

            </td>

        </tr>
        </tbody></table>
        <br/>
     </div>
</body>
</html>



Copy this code to an file and name it as Default.Html. Double click the file, it will open in a browser. Rest of the instructions are given on the page.

No comments:

Post a comment

Thank You for Your Comments. We will get back to you soon.

back to top