jquery function to replace textarea text not working

Question

i'm not that used to working with jquery so any help would be appreciated. I have written this function but cannot get it to work, can anyone tell me what is wrong.

$(function() {
   $('#replace_button').onclick(function() {
     $('#box_txt').val().replace(/\t/g, '[TAB]');
     $('#box_txt').val().replace(/\n/g, '[BREAK]');
   });
});

the html that accompanies it is

<textarea name='box_txt' id='box_txt' rows='6' cols='50'></textarea>
  <br>
  <input type='button' id='replace_button' value='Replace'>

I just want to replace all tabs with [TAB] and all linebreaks with [BREAK] when the button is pressed.

Many thanks.

Answer 1

val returns a string, not a kind of pointer to the value. And replace doesn't change the string you pass (strings are immutable in JavaScript) but returns a new one.

You may use

var field = $('#box_txt'), s = field.val();
s = s.replace(/\t/g, '[TAB]').replace(/\n/g, '[BREAK]');
field.val(s);

Demonstration

Answer 2

goes like this:

$(function() {
       $('#replace_button').onclick(function() {
         $('#box_txt').val($('#box_txt').val().replace(/\t/g, '[TAB]'));
         $('#box_txt').val($('#box_txt').val().replace(/\n/g, '[BREAK]'));
       });
    });

you get the value manipulate it but never set it back in the textarea :-)