如何使用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

只是.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 2

編輯：我認為您需要替換該行，而不是插入一個新的。 這是基於相同答案的新答案。

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

按照我的示例中的注釋，您應該了解它是如何工作的：

 // 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()再次將更新后的行提供給文本區域文本。

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