javascript - 如何在获取另一个输入框的值的 keyup 事件中替换文本区域中的特定文本

Question

如何在 keyup 事件中替换文本区域中的特定文本，该事件获取另一个输入框的值并替换文本区域中的特定文本？

HTML 看起来像这样 -

    <div>
       <label>test1</label>
       <input name="test_1" id="test1" type="text">

       <label>Message</label>       
       <textarea rows="2" name="textarea_2" id="textarea2">Hello [initial text] blah blah blah</textarea>   
    </div>

我想用 $('#test1').val(); 中的内容替换 [初始文本]

谢谢

Answer 1

将要替换的字符串存储在 var 中:

var lastStr = "[initial text]";

$("#test1").keyup(function() {
    var val = $("textarea").val();
    $("textarea").val(val.replace(lastStr, $("#test1").val()));
    lastStr = $("#test1").val(); // update last str to replace.
});

演示:http://jsfiddle.net/k9uG4/1/

更新:

我发现前面的示例不安全，因为它替换了整个区域中的所有匹配字符。此示例仅替换我们想要的特定部分:

var lastStr = "[initial text]";
var startIndex = $("textarea").val().indexOf(lastStr);

$("#test1").keyup(function() {
    var oldVal = $("textarea").val();
    // get all the text before
    var firstPart = oldVal.substring(0, startIndex);
    // get the piece we want And replace it
    var midPart = oldVal.substr(startIndex, lastStr.length).replace(lastStr, $("#test1").val());
    // get all the text after
    var lastPart = oldVal.substring(startIndex + lastStr.length, oldVal.length);

    $("textarea").val( firstPart + midPart +lastPart );
    lastStr = $("#test1").val();
});

演示:http://jsfiddle.net/k9uG4/6/