如何替换textarea中的特定行？

Question

我正在尝试仅替换文本区域中的一行

我正在尝试更改该行，以便在同一表单的其他地方进行选择时更新它。

我认为最好将 textarea 读入一个数组，根据需要修改数组元素，然后将其写回文本区域。

这可行，但我将其附加到当前值，而不是替换它们。

如何替换它们？

或者有更好的方法吗？

这是文本区域：

<textarea  name="msg" id="msg"  style="height: 150px; width: 300px;">
first line is OK
sendline is also fine

new val=
this line is fine    
</textarea>

我要替换的行是new val= 我正在尝试用new val= 和$('#test').val(); 的值替换它

这是我目前拥有的 jquery：

$('#test').on('change', function() {
    var test = $(this).val();      
    var lines = $('#msg').val().split(/\n/);
    lines[2] = "new val= " + test;
    $.each(lines , function(i, val) { 
        $("#msg").append("\r\n" + lines[i]);
    }) 

和一个 fiddle 显示它在做什么。

有什么想法吗？

谢谢

Answer 1

您应该使用.html() 将行添加到文本区域或先将其清空。 此外，您没有更改正确的行索引，也无需使用.each() 循环遍历行，您只需使用.join()。

这是一个工作示例：

$(function(){
  
    $('#test').on('change', function() {
        var test = $(this).val();      
        var lines = $('#msg').val().split(/\n/);
        lines[3] = "new val= " + test;
        $("#msg").html(lines.join("\n"));
    });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id='test' name='test'>
    <option value='1234'>1234</option>
    <option value='3456'>3456</option>
    <option value='4445'>4445</option>
</select>    
<br/><br/>

<textarea  name="msg" id="msg"  style="height: 150px; width: 300px;">
first line is OK
sendline is also fine

new val=
this line is fine    
</textarea>

Answer 2

$('#msg').html('Message');

使用 .html() 而不是 append() 方法。html 方法将 textarea 标记之间的所有内容替换为您的新消息。

.append() 方法用于在元素内添加内容

例子

<div id="content">
<p>Hello World</p>
</div>

.append() will add new content inside <div>
.html() will replace the content inside the <div>

更新

<script>

$('#test').on('change', function() {
            var test = $(this).val();      
            var lines = $('#msg').text().split(/\n/);
            lines[3] = "new val= " + test;
            $('#msg').html("");
            $.each(lines , function(i, val) { 

                $("#msg").append("\r\n" + lines[i]);
            }); 
        });
</script>

http://jsfiddle.net/84pk258r/1/

您好，请检查更新后的代码现在可以正常工作！