Textarea - 获取每一行，查找换行符答案

【问题标题】：Textarea - get each line, find line breaksTextarea - 获取每一行，查找换行符
【发布时间】：2016-05-10 08:13:29
【问题描述】：

我想获取文本区域中的每一行。 textarea 很小，可以根据宽度限制换行。所以我尝试了：

// Sample text: I want to find(line wrapped) all lines here

$("#textarea1").val().split(/(\r\n|\n|\r)/gm).length
// 1, not the right length, should be 2

$("#textarea1").val().split(/\r?\n/g).length
// 1

$("#textarea1").val().split("\n").length
// 1

$("#textarea1").val().split("\r").length
// 1

我还单独和一起尝试了wrap="hard" 和white-space: pre-wrap。

似乎没有找到换行符！！需要帮助，谢谢。

【问题讨论】：

我不确定这是否可行。并非没有遍历 shadow DOM（并非每个浏览器都有）。这是因为换行是由于 CSS 造成的，并没有保存在 textarea 的值中。
这个问题似乎非常相关：stackoverflow.com/questions/3738490/finding-line-wraps
嗯，这很相关，几乎可以完成工作！

标签： javascript jquery html css textarea

【解决方案1】：

我想就像你说的那样：textarea 根据宽度限制换行——这意味着你找不到换行符。您要查找的换行符是字符，这些字符尚未插入到您的文本中。

【讨论】：

检测字符宽度的问题是取决于字体大小和字体类型。例如，在 Tahoma 中，l（小 L）的宽度远小于 G，我猜 Times New Roman 的差异较小。这使它变得复杂。

【解决方案2】：

所以我的做法是：

将textarea in question - $("#text") 克隆到一个透明的文本区域。使用透明字体。
将克隆的 id 值更改为 $("#newtext") 并将其附加到 DOM。
在每次键入时，我们在this character's keyup 之前获取$("#text") 的值。将该值放入$("#newtext") 并检查是否为$("#newtext").get(0).scrollHeight() > $("#newtext").height()。如果 true => this 字符导致换行。
循环增加$("#newtext") 的行数，直到
$("#newtext").get(0).scrollHeight() === $("#newtext").height()
在this 字符之前获取文本，添加\n，将this 字符添加到$("#newtext").val()
将$("#newtext").val() 应用到$("#text").val()。
从 DOM 中删除 $("#newtext")。
对每个按键事件重复上述所有步骤

以上答案适用于与 - stackoverflow.com/questions/3738490/finding-line-wraps – evolutionxbox yesterday类似的行

所以，基本上我们将换行符转换为可以使用$("#text").val().split("\n") 找到的换行符。

（注意 - 如果我们不将透明文本区域附加到 DOM，它的 scrollHeight() 将是 undefined）

【讨论】：