Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to detect line breaks in a text area input?

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.

like image 391
Dave Haigh Avatar asked Jun 08 '12 14:06

Dave Haigh


People also ask

How do I find line breaks in a text file?

Open any text file and click on the pilcrow (¶) button. Notepad++ will show all of the characters with newline characters in either the CR and LF format. If it is a Windows EOL encoded file, the newline characters of CR LF will appear (\r\n). If the file is UNIX or Mac EOL encoded, then it will only show LF (\n).

How do you check line breaks?

To check whether a JavaScript string contains a line break, we can use the JavaScript regex's exec method. We call /\r|\n/. exec with text to return the matches of newline characters in text .


3 Answers

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.

like image 50
beeglebug Avatar answered Sep 20 '22 06:09

beeglebug


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.

like image 21
Pointy Avatar answered Sep 21 '22 06:09

Pointy


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

like image 22
Elias Van Ootegem Avatar answered Sep 20 '22 06:09

Elias Van Ootegem