逐行從textarea獲取文本？

Question

HTML代碼

<textarea id="test"></textarea>
<button id="button_test">Ok</button>

使用Javascript

  $(document).ready(function()
  {
     $("#test").val("123e2oierhqwpoiefdhqwopidfhjcospid");
  });
 $("#button_test").on("click",function()
      {
      var as=document.getElementById("test").value;
      console.log(as);
      });

我們可以使用val和split函數逐行獲取textarea的值。 但是，有可能從textarea逐行獲取非常長的單詞嗎？在這個例子中，我需要輸出123e2oierhqwpoiefdhqwo和pidfhjcospid作為單獨的值。 Jsfiddle鏈接在這里

Answer 1

你可以使用這樣的東西。 這會將換行符插入到textarea中。

致謝： https ： //stackoverflow.com/a/4722395/4645728

 $(document).ready(function() { $("#test").val("123e2oierhqwpoiefdhqwopidfhjcospid"); }); $("#button_test").on("click", function() { ApplyLineBreaks("test"); var as = document.getElementById("test").value; console.log(as); }); //https://stackoverflow.com/a/4722395/4645728 function ApplyLineBreaks(strTextAreaId) { var oTextarea = document.getElementById(strTextAreaId); if (oTextarea.wrap) { oTextarea.setAttribute("wrap", "off"); } else { oTextarea.setAttribute("wrap", "off"); var newArea = oTextarea.cloneNode(true); newArea.value = oTextarea.value; oTextarea.parentNode.replaceChild(newArea, oTextarea); oTextarea = newArea; } var strRawValue = oTextarea.value; oTextarea.value = ""; var nEmptyWidth = oTextarea.scrollWidth; var nLastWrappingIndex = -1; for (var i = 0; i < strRawValue.length; i++) { var curChar = strRawValue.charAt(i); if (curChar == ' ' || curChar == '-' || curChar == '+') nLastWrappingIndex = i; oTextarea.value += curChar; if (oTextarea.scrollWidth > nEmptyWidth) { var buffer = ""; if (nLastWrappingIndex >= 0) { for (var j = nLastWrappingIndex + 1; j < i; j++) buffer += strRawValue.charAt(j); nLastWrappingIndex = -1; } buffer += curChar; oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - buffer.length); oTextarea.value += "\\n" + buffer; } } oTextarea.setAttribute("wrap", ""); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <textarea id="test"></textarea> <button id="button_test">Ok</button> 

Answer 2

使用.match(/pattern/g) 。 作為您的OP，模式應該開始\\w (Find a word character)並匹配字符串序列{start,end}

$("#button_test").on("click",function()
{
  var as=document.getElementById("test").value; 
  console.log(as.match(/(\w{1,22})/g));
});

Answer 3

如果你使用css修改了textarea寬度，你可以這樣做：

CSS

textarea { resize: vertical; }

JavaScript的

$("#button_test").on("click",function(){
    var as=document.getElementById("test").value;
    var len = document.getElementById("test").cols;
    var chunks = [];

    for (var i = 0, charsLength = as.length; i < charsLength; i += len) {
        chunks.push(as.substring(i, i + len));
    }
    console.log(chunks);
});

Answer 4

<textarea>元素具有內置功能，可以控制單詞換行的位置。 可以設置cols屬性（在HTML中加密編碼或使用jQuery使用.attr()方法設置）。 該屬性水平擴展文本區域，它還自動將文本包裝在設置值。

示例jsFiddle

$("#test").val("123e2oierhqwpoiefdhqwopidfhjcospid");
var newString = $("#test").val().toString();
var splitString = parseInt($("#test").attr("cols"), 10) + 1;
var stringArray = [];
stringArray.push(newString);
var lineOne = stringArray[0].slice(0, splitString);
var lineTwo = stringArray[0].slice(splitString);
var lineBreakString = lineOne + "\n" + lineTwo;
console.log(lineTwo);
$('#test').after("<pre>" + lineBreakString + "</pre>");

 $("#test").val("123e2oierhqwpoiefdhqwopidfhjcospid"); var newString = $("#test").val().toString(); var splitString = parseInt($("#test").attr("cols"), 10) + 1; var stringArray = []; stringArray.push(newString); var lineOne = stringArray[0].slice(0, splitString); var lineTwo = stringArray[0].slice(splitString); var lineBreakString = lineOne + "\\n" + lineTwo; $('#test').after("<pre>" + lineBreakString + "</pre>"); //console.log(lineBreakString); 

 pre { color: green; background: #CCC; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <textarea id="test" cols='21'></textarea> <button id="button_test">Ok</button> 

該示例解決了所提出的具體問題。 如果要處理較大的文本塊，則應使用.each()方法和for循環來迭代每個換行符。

文件 ：

。切片（）

textarea的

。推（）

.parseInt（）

.attr（）

Answer 5

這可能不是最好的方式，但它有效，我希望它可以幫助你。 首先，我發現textarea允許8px用於默認的fontsize charactere。 例子：帶有80px的Textarea =>允許最多10個字符的行，所有其他行都在新行上溢出。

從這里你可以做一個像這樣的簡單函數：

$("#button_test").on("click",function()
{
console.clear();
var length_area = $("#test").width();
var length_value = $("#test").val().length;

var index = Math.trunc(length_area/8);

var finalstr = $("#test").val().substring(0, index) + " " + $("#test").val().substring(index);

console.log(finalstr);

});

這里是JSFiddle