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链接here

Answer 1

你可以使用这样的东西。这会将换行符插入到textarea中。

致谢：https://stackoverflow.com/a/4722395/4645728

＆＃13;

$(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", "");
}

＆＃13;

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

＆＃13;

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()方法设置）。该属性水平扩展文本区域，它还自动将文本包装在设置值。

Example 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循环来迭代每个换行符。

<强>文档：

Answer 5

这可能不是最好的方式，但它有效，我希望它可以帮助你。首先，我发现textarea允许8px用于默认的fontsize charactere。例如： Textarea 80px =＆GT;允许最多10个字符的行，所有其他行在新行上溢出。

从这里你可以做一个像这样的简单函数：

<body ng-app="starter" ng-controller="MapCtrl">

  <ion-header-bar class="bar-stable">
    <h1 class="title">Map</h1>
  </ion-header-bar>

  <ion-content scroll="false">

    <div class="row">

      <div class="col col-50 col-center">
        <h3>Some heading</h3>
        <p>Some text</p>
      </div>

      <div class="col col-50">
        <div style="height: 150px; width: 100%;">
          <map on-create="mapCreated(map)"></map>
        </div>
      </div>

    </div>

    <div class="padding">
      <a href="#" class="button button-block button-calm">Some button</a>
      <a href="#" class="button button-block button-positive">Another button</a>
    </div>

  </ion-content>

  <ion-footer-bar class="bar-stable">
    <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"></a>
  </ion-footer-bar>

</body>

这里是JSFiddle

逐行从textarea获取文本？

5 个答案: