逐行从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