javascript - Jquery replace string in a textarea - Stack Overflow

admin管理员组

文章数量:1022719

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

});

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

});

• javascript
• jquery
• replace

Share Improve this question Follow edited Sep 26, 2015 at 22:48 Kurkula asked Sep 26, 2015 at 22:35 KurkulaKurkula 6,7822828 gold badges138138 silver badges215215 bronze badges 1

• 1 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 Commented Sep 26, 2015 at 22:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./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./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>

1. You want to look for keyup, not keypress (you want to make sure you get the whole string.
2. You are trying to put the textbox value right? You're looking for the textarea value in line two of the javascript.
3. If you replace sample on the first key stroke, there won't be anything to replace the second key stroke.
4. You can simplify lines 3 and 4 into one line.
5. 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/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);
});

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

});

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

});

• javascript
• jquery
• replace

Share Improve this question Follow edited Sep 26, 2015 at 22:48 Kurkula asked Sep 26, 2015 at 22:35 KurkulaKurkula 6,7822828 gold badges138138 silver badges215215 bronze badges 1

• 1 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 Commented Sep 26, 2015 at 22:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./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./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>

1. You want to look for keyup, not keypress (you want to make sure you get the whole string.
2. You are trying to put the textbox value right? You're looking for the textarea value in line two of the javascript.
3. If you replace sample on the first key stroke, there won't be anything to replace the second key stroke.
4. You can simplify lines 3 and 4 into one line.
5. 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/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);
});

本文标签： javascriptJquery replace string in a textareaStack Overflow