如何使用jQuery将文本插入textarea中的特定行？

Question

如果我有这个HTML代码：

<textarea>
line 1 text
line 2 text
line 3 text
line 4 text
line 5 text
</textarea>

如何在第三行之后插入文本，所以我的结果如下：

<textarea>
line 1 text
line 2 text
line 3 text
this is my new text here!!!!!!!!!
line 4 text
line 5 text
</textarea>

Answer 1

我们创建一个函数，它接收您的文本和行号，通过新行字符拆分框中的当前文本，添加新文本，并更新textarea框。

function addLine(text, line) {
  let ta = document.querySelector("textarea"), 
  split_text = ta.textContent.split(/\n/gmi);

    if (line <= split_text.length - 1) split_text.splice(line - 1, 0, text);
    else split_text.push(text);
  ta.textContent = split_text.join("\n");
}

addLine("This is my new text here!", 3);
addLine("This is another example!", 7);
addLine("And one more!", 2);

function addLine(text, line) {
let ta = document.querySelector("textarea"), 
split_text = ta.textContent.split(/\n/gmi);

  if (line <= split_text.length - 1) split_text.splice(line - 1, 0, text);
  else split_text.push(text);
  ta.textContent = split_text.join("\n");
}

addLine("This is my new text here!", 3);
addLine("This is another example!", 7);
addLine("And one more!", 2);

textarea {
  width: 300px;
  height: 300px;
}

<textarea>
line 1 text
line 2 text
line 3 text
line 4 text
line 5 text</textarea>

Answer 2

只需.split新行上的.val，拼接新文本，并将值设置为.join'd值：

let line = 3;
let val = $('textarea').val().split('\n');
val.splice(line - 1, 1, 'new text');
$('textarea').val(val.join('\n'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea style="height: 70px">
line 1 text
line 2 text
line 3 text
line 4 text
line 5 text
</textarea>

Answer 3

编辑：我认为你需要更换线路，而不是插入新线路。这是基于同一个的新答案。

// get the value and split it into lines.
var linesArr = $('textarea').val().split('\n');
var indexToInsertAt = 3;
// Insert an new element at the index you want
linesArr.splice(indexToInsertAt, 0, "this is my new text here!!!!!!!!!");
// replace the value with the new string (after you add the new line char again)
$('textarea').val(linesArr.join('\n'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea cols="50" rows="20">
line 1 text
line 2 text
line 3 text
line 4 text
line 5 text
</textarea>

Answer 4

按照我的示例中的注释，您应该了解它是如何工作的：

// get a reference to the jq node
var t = $('textarea')

// get the org str
var orgStr = t.val()

//manipulate the string splitting every line as an array item
var arr = orgStr.split('\n')

//add 'stuff' on line 3
arr.splice(2,0,'stuff')

//join the array and use it 
t.val(arr.join('\n'))

textarea {
  height: 400px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
line 1 text
line 2 text
line 3 text
line 4 text
line 5 text
</textarea>

Answer 5

这可以帮助你，使用.split()转换所有行的数组，然后使用.splice()添加到您想要的索引新行，然后.join()再次提供回textarea与更新的文本。

function addLine(textarea, lineNo, line) {

  var lines = textarea.val().split('\n');

  lines.splice(lineNo, 0, line);
  textarea.val(lines.join('\n'));
}

$("#add").on('click', function() {
  var textarea = $("textarea");
  var totalLines = textarea.val().split('\n').length;
  var line = $("#line").val();
  var lineNo = $("#line_no").val();

  var inputNotEmpty = line !== '' && lineNo !== '';
  var validLineNum = (lineNo <= totalLines && lineNo >= 0);

  if (inputNotEmpty) {
    if (validLineNum) {
      addLine(textarea, lineNo, line);
    } else {
      console.log('Provide a valid Line number');
      setTimeout('console.clear()', 2000);
    }
  } else {
    console.log('New Line Text and New Line Number both are required');
    setTimeout('console.clear()', 2000);
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="50" rows="10">line 1 text
line 2 text
line 3 text
line 4 text
line 5 text</textarea>
<br/>
<p>Add "0" as line number to add in the start of the textarea</p>
<button id="add">add line after</button>
<input id="line_no" type="text" value="" placeholder="Enter line number" />
<input id="line" type="text" value="" placeholder="Enter new line text" />