Replace Selected Text in a Textbox 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.