Jquery replace string in a textarea

Question

I am trying to replace a string value in textarea while typing in textbox with jquery. I used keypress event to try achieving that. What may be the issue here in this fiddle?

<input type="text" id="textbox" /> <textarea id="txtArea">This is a sample test.</textarea>

jquery code

$("#textbox").keypress(function () { var txtAreaValue = $('#txtArea').val(); var txtAreaValueAfterreplace = txtAreaValue.replace('sample', $(this).val()); $('#txtArea').val(txtAreaValueAfterreplace); });

It may be a typo, your call to get the value of the text area isn't looking it up by id. Try $(#txtArea).val(); — chRyNaN
– chRyNaN, Commented Sep 26, 2015 at 22:46

Jesse · Accepted Answer · 2015-09-26 23:00:04Z

The main problem is that, when using keypress you are getting the value of the input box before it is set, so nothing appears. However even if you change it to keyup you still will only get one value because once 'sample' is replaced it is gone so therefor it cannot be replaced again.

A new logic needs to be considered if you are wanting to replace sample with the full value of the textarea. Consider the following example:

$("#add").click( function () { $( '#txtArea' ).val( $('#txtArea').val().replace( 'sample', $("#textbox").val() ) ); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="textbox" /><br> <input type='button' id='add' value='add'> <textarea id="txtArea">This is a sample test.</textarea>

Or we replace when the user stopped typing

var typing; $("#textbox").keyup( function () { // Stop the change from being made since they typed again clearTimeout(typing); // They typed, so set the change to queue up in a 3rd of a second typing = setTimeout(function(){ $( '#txtArea' ).val( $('#txtArea').val().replace( 'sample', $("#textbox").val() ) ); },350); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="textbox" /><br> <textarea id="txtArea">This is a sample test.</textarea>

Yes but with more logic. Depending on how complicated this may get this could be as easy as having a setTimeout to replace and clearing it on each keypress to only set the value once someone has stopped typing, or using regex to replace in between the words directly but that could also get complicated on larger applications.
I added a snippet of code that will show you how it can work by waiting until they stop typing by 350 milliseconds
this seems to be a good option instead of thinking more on implementing logic. Very thanks for pointing to this path.

Steven Lacks · Accepted Answer · 2015-09-26 22:58:52Z

You want to look for keyup, not keypress (you want to make sure you get the whole string.
You are trying to put the textbox value right? You're looking for the textarea value in line two of the javascript.
If you replace sample on the first key stroke, there won't be anything to replace the second key stroke.
You can simplify lines 3 and 4 into one line.
replace can only be used on a string. So you need to get the value first, if you're going to do it that way. txtAreaValue.val().replace('sample', $(this).val());

Feel free to play around with it on this fiddle: http://jsfiddle.net/snlacks/abc6skp9/

$("#txtBox").on('keyup', function () { var txtValue = $(this).val(); $('#txtArea').val("this is a " + txtValue); });

If you have a longer string, replace might work better, but you still need to store the full string somewhere.

var longString = "some really long string... sample... more..."; $("#txtBox").on('keyup', function () { var txtValue = $(this).val(); $('#txtArea').val(longString.replace('sample', txtValue); });

You can do: $(input).val( "this is a " + textValue + " and another word.");
This puts the entire text of a textarea into a javascript statement. What if the textarea box has 1,000 lines of text?
You can use replace or or the string concatenation either works. replace will work best for larger strings, but you still have to cache it somewhere. In my example, it's just stored as a literal in the callback. But you can store the longstring somewhere else and do the replace, then set the input value.
I added the replace method version to the answer and explained.

Collectives™ on Stack Overflow

Jquery replace string in a textarea

2 Answers 2

4 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Related