如何检测文本区域输入中的换行符？答案

【问题标题】：How to detect line breaks in a text area input?如何检测文本区域输入中的换行符？
【发布时间】：2012-06-12 14:42:32
【问题描述】：

检查文本区域值是否存在换行符然后计算出现次数（如果有）的最佳方法是什么？

我的网页上的表单上有一个文本区域。我正在使用 JavaScript 来获取文本区域的值，然后检查它的长度。

示例

enteredText = textareaVariableName.val();
characterCount = enteredText.length; // One line break entered returns 1

如果用户在文本区域输入换行符，我上面的计算将换行符的长度设为 1。但是我需要将换行符的长度设为 2。因此我需要检查换行符和换行符的数量出现次数，然后将其添加到总长度中。

我想要实现的示例

enteredText = textareaVariableName.val();
characterCount = enteredText.length + numberOfLineBreaks;

在问这个问题之前我的解决方案如下：

enteredText = textareaVariableName.val();
enteredTextEncoded = escape(enteredText);
linebreaks = enteredTextEncoded.match(/%0A/g);
(linebreaks != null) ? numberOfLineBreaks = linebreaks.length : numberOfLineBreaks = 0;

我可以看到对文本进行编码和检查%0A 有点冗长，所以我寻求了一些更好的解决方案。谢谢大家的建议。

【问题讨论】：

@Dave Haigh, Edit 是有原因的，不要使用answer 部分添加更多详细信息:)
@Jashwant 这不是额外的细节，而是对我的问题的回答......所以我相信我把它放在了正确的位置。
如果我没记错的话，“通常”只有当您想标记为答案或稍后发现答案时，您的解决方案才应放在答案部分。如果您将有问题的尝试包括在内，这将有助于其他人调查您的尝试。在答案部分找到你的尝试比在你的问题中找到它要困难一点:)
@Jashwant 可能会回答不是尝试，因为它确实有效。我故意将其排除在外，因为我不想影响任何其他答案。我的问题是“如何”而不是“有更好的方法”。问一个你也已经有了可行答案的问题并没有错，事实上，“通常”鼓励这样做。
我没有脾气，我只是不同意你的观点。

标签： javascript jquery special-characters line-breaks

【解决方案1】：

您可以在包含换行符的字符串上使用match，并且该数组中的元素数量应与换行符的数量相对应。

enteredText = textareaVariableName.val();
numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length;
characterCount = enteredText.length + numberOfLineBreaks;

/\n/g 是一个正则表达式，意思是“查找字符 \n（换行符），并在全局范围内（跨越整个字符串）执行此操作。

||[] 部分是为了防止没有换行符。匹配会返回null，所以我们改为测试一个空数组的长度以避免错误。

【讨论】：

感谢您的回答，但我很好奇如果用户自己输入\n 会发生什么？也许他们只是想表达这个字符串。这种方式是否会将\n字符串替换到下一行？
会的。 Javascript 并不真正依赖于操作系统，它只是在浏览器之间有所不同，而且这个答案中没有任何东西不能一直回到 IE6。

【解决方案2】：

这是一种方法：

var count = text.length + text.replace(/[^\n]/g, '').length;

或者，您可以将所有“裸”\n 字符替换为 \r\n，然后使用总长度。

【讨论】：

这将使任何 except 换行符的计数加倍，并且仅适用于第一个换行符之前的字符。如果我没记错的话，与 OP 的问题完全相反。
Elias：我认为它实际上是用任何内容替换不是换行符的所有内容，然后计算剩下的内容的长度，这将只是换行符。很聪明！

【解决方案3】：

我会使用正则表达式来做到这一点：

var inTxt = document.getElementById('txtAreaId').value;
var charCount = inTxt.length + inTxt.match(/\n/gm).length;

/\n/ 匹配换行符（显然），g 是全局标志。 m 代表多线，在这种情况下你显然需要它......
或者，虽然我记得这有点慢：

var charCount = inTxt.length + (inTxt.split("\n").length);

编辑刚刚意识到，如果没有匹配的换行符，这将吐出一个错误，所以最好这样做：

charCount = intTxt.length + (inTxt.match(/\n/) !== null ? inTxt.match(/\n/gm).length : 0);

或者类似的东西……

【讨论】：

如果没有换行符，match会返回null，所以访问length会报错。

【解决方案4】：

对于新的 JS，请使用 encodeURI()，因为在 ECMAScript 1.5 中不推荐使用 escape()。

改为使用：
enteredText = textareaVariableName.val(); enteredTextEncoded = encodeURI(enteredText); linebreaks = enteredTextEncoded.match(/%0A/g); (linebreaks != null) ? numberOfLineBreaks = linebreaks.length : numberOfLineBreaks = 0;

【讨论】：

【解决方案5】：

您可以根据新行拆分文本：

let textArray = text.split(/^/gm)
console.log(textArray.length)

【讨论】：

谢谢。这个答案有助于找到换行符，同时还能将原始文本保留在变量中。