文本区域-获取每一行，找到换行符

Textarea - get each line, find line breaks

本文关键字：一行 换行符 区域 获取 文本      更新时间：2023-09-26

我想得到文本区域中的每一行。文本区域很小，并根据宽度限制包装单词。所以我尝试了：

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

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

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

所以我的做法是：

  • 将textarea in question - $("#text")克隆到透明文本区域中。使用透明字体
  • 将clone的id值更改为$("#newtext")，并将其附加到DOM中
  • 在每个keyup中，我们都会在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")
  • 对每个keyup事件重复以上所有步骤

上面的答案与-stackoverflow.com/questions/33738490/finding-line-wraps–evolutionxbox昨天的类似

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

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

相关文章：