How to detect line breaks in a text area input?

Question

What is the best way to check the text area value for line breaks and then calculate the number of occurrences, if any?

I have a text area on a form on my webpage. I am using JavaScript to grab the value of the text area and then checking its length.

Example

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

If a user enters a line break in the text area my calculation above gives the line break a length of 1. However I need to give line breaks a length of 2. Therefore I need to check for line breaks and the number of occurrences and then add this onto the total length.

Example of what I want to achieve

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

---

My solution before asking this question was the following:

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

I could see that encoding the text and checking for %0A was a bit long-winded, so I was after some better solutions. Thank you for all the suggestions.

Answer 1

Here's one way:

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

Alternatively, you could replace all the "naked" \n characters with \r\n and then use the overall length.

Answer 2

I'd do this using a regular expression:

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

where /\n/ matches linebreaks (obviously), g is the global flag. m stands for mult-line, which you evidently need in this case...
Alternatively, though as I recall this is a tad slower:

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

Edit Just realized that, if no line breaks are matched, this will spit an error, so best do:

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

Or something similar...

Answer 3

For new JS use encodeURI(), because escape() is deprecated in ECMAScript 1.5.

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

Answer 4

You can use match on the string containing the line breaks, and the number of elements in that array should correspond to the number of line breaks.

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

/\n/g is a regular expression meaning 'look for the character \n (line break), and do it globally (across the whole string).

The ||[] part is just in case there are no line breaks. Match will return null, so we test the length of an empty array instead to avoid errors.