How to detect line breaks in a text area input?

JavascriptJquerySpecial CharactersLine Breaks

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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.

Solution 3 - Javascript

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

Solution 4 - Javascript

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;

Solution 5 - Javascript

You can split the text based on new lines:

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDave HaighView Question on Stackoverflow
Solution 1 - JavascriptbeeglebugView Answer on Stackoverflow
Solution 2 - JavascriptPointyView Answer on Stackoverflow
Solution 3 - JavascriptElias Van OotegemView Answer on Stackoverflow
Solution 4 - JavascriptPeterView Answer on Stackoverflow
Solution 5 - JavascriptAnupam ChaplotView Answer on Stackoverflow