HTML textarea：使用 JavaScript 获取包装文本？

Question

如果我有这样的文本区域：

<textarea id="foo" cols=80 wrap="hard"></textarea>

有没有办法使用 JavaScript 来抓取硬包装的文本？

我已经尝试了明显的$("#foo").val() ，但这会返回未包装的文本。

例如，如果 textarea 是：

<textarea id="bar" cols=5 wrap="hard">a b c d e f</textarea>

浏览器会将文本换行为：

a b c
d e f

我想通过某种方式来获取该文本—— "abc\\nd ef" （由于wrap=hard ，如果<textarea…以<form…提交，则该文本将被发送）。

Answer 1

由于格式是在提交时由浏览器完成的，因此最好的办法是让浏览器提交，但提交到您选择的位置，例如 iframe，您可以在其中从表单或 url 参数中提取格式化文本。

<html><body>
    <script type="text/javascript">
        function getURLParameter(qs, name)
        {
          var pattern = "[\\?&]"+name+"=([^&#]*)";
          var regex = new RegExp( pattern );
          var res = regex.exec( qs );
          if (res == null)
            return "";
          else
            return res[1];
        }
        function getHardWrappedText(){
            if (top.location.href !== window.location.href) return;
            var frm_url = document.getElementById('ifrm').contentDocument.URL;
            if (frm_url.indexOf('http') < 0) return;
            var text = unescape(getURLParameter(document.getElementById('ifrm').contentDocument.URL, 'bar')).replace(/\+/g,' ');
            alert(text)
        }
    </script>
    <form name="main" method="get" target="ifrm">
        <textarea id="bar" name="bar" cols=5 wrap="hard">a b c d e f</textarea>
        <input type="submit">
    </form>
    <iframe id="ifrm" name="ifrm" onload="getHardWrappedText();" style="display:none;"></iframe>
</body></html>

Answer 2

编辑 2

我可以提出的唯一解决方案是创建一个带有名称的隐藏 iframe，并将表单提交到该框架。 然后 iframe 可以通过window.parent与其父级通信并提供返回的文本（其中将包括新行，因为表单已正常提交..）

当然，如果您愿意，可以通过脚本调用提交..

以下我有删除线，因为它不适用于这种情况.. ~~一个通用的方法是~~

 
 
 
  
  
  alert( $('<div/>').append($('#foo').clone()).html() );

~~这是做什么的~~

~~创建一个新的 div（在内存中）~~

 
 
 
 
  
  
  $('<div/>')

~~克隆所需的元素 #foo并将其附加到我们创建的 div~~

 
 
 
 
  
  
  .append( $('#foo').clone() )

~~提取内部 html（但由于我们正在处理包裹在元素周围的 div，因此我们得到元素 html ..~~

 
 
 
 
  
  
  .html()

~~[编辑]~~
~~显然我误解了 .. 要获取元素的内部文本，请使用 .text() 方法，因此~~

 
 
 
  
  
  $('#foo').text();

Answer 3

我假设您知道文本区域的尺寸（如果没有，您可以从 DOM 中获取它们）。

使用它来分割字符串。 转到第 x 个字符（在您的示例中是第 5 个字符），然后查看下一个字符是否为空格。 如果是这样（或者如果前面的段中没有空格），这就是您拆分的地方。 否则，您会找到前面的空格并在那里拆分。

将其包装在一个函数中，您可以添加一些递归以找到第 n 行。

Answer 4

我认为不可能开箱即用您可以使用 textarea 的cols值自己包装文本。 从 HTML 的角度来看，textarea 中的文本没有被换行。 这只是它的显示方式，以便您能够更好地阅读它。

附注。 如果您使用 jQuery，您应该使用$('#foo')而不是$('[id=foo]')选择器，因为它更快（也更短）。

Answer 5

这有点麻烦，但是您可以在服务器上创建一个脚本，该脚本以某种格式（JSON、纯文本、任何适合您的格式）打印出发布到它的任何内容，并在您需要时通过 AJAX 将您的 textarea 发布到该脚本得到它的内容。

Answer 6

使用现代浏览器，可以在FormData 中找到换行的文本：

new FormData(document.querySelector('form')).get('name')

这似乎与提交的内容相匹配（如图所示的包装或未包装的值）。

HTML textarea：使用 JavaScript 获取包装文本？

问题描述

6 个解决方案

解决方案1
2 2010-01-26 21:34:55

解决方案2
1 2010-01-26 16:20:37

解决方案3
1 2010-01-27 02:58:49

解决方案4
0 2010-01-26 16:05:09

解决方案5
0 2010-01-26 16:53:52

解决方案6
0 2021-01-07 23:03:32

HTML textarea：使用 JavaScript 获取包装文本？

问题描述

6 个解决方案

解决方案1 2 2010-01-26 21:34:55

解决方案2 1 2010-01-26 16:20:37

解决方案3 1 2010-01-27 02:58:49

解决方案4 0 2010-01-26 16:05:09

解决方案5 0 2010-01-26 16:53:52

解决方案6 0 2021-01-07 23:03:32

解决方案1
2 2010-01-26 21:34:55

解决方案2
1 2010-01-26 16:20:37

解决方案3
1 2010-01-27 02:58:49

解决方案4
0 2010-01-26 16:05:09

解决方案5
0 2010-01-26 16:53:52

解决方案6
0 2021-01-07 23:03:32