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

只需.split新行.val，拼接您的新文字，并将值设置为.join＆＃39; d值：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我们创建一个函数，它接收您的文本和行号，通过新行字符拆分框中的当前文本，添加新文本，并更新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 4

按照我的示例中的注释，您应该了解它的工作原理：

＆＃13;

// 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'))

＆＃13;

textarea {
  height: 400px
}

＆＃13;

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

＆＃13;

Answer 5

这可以帮助您，使用.split()转换所有行的数组，然后使用.splice()将新行添加到所需索引，然后再次.join()返回带有更新文本的textarea。

struct Exchanges {} 
     struct currency {}
         struct rates {}

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

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

5 个答案: