I am using below code to calculate words, characters and lines.
function wordCount( val ){
var wom = val.match(/\S+/g);
return {
charactersNoSpaces : val.replace(/\s+/g, '').length,
characters : val.length,
words : wom ? wom.length : 0,
lines : val.split(/\r*\n/).length
};
}
var textarea = document.getElementById("text");
var result = document.getElementById("result");
textarea.addEventListener("input", function(){
var v = wordCount( this.value );
result.innerHTML = (
"<br>Characters (no spaces): "+ v.charactersNoSpaces +
"<br>Characters (and spaces): "+ v.characters +
"<br>Words: "+ v.words +
"<br>Lines: "+ v.lines
);
}, false);<textarea id="text"></textarea>
<div id="result"></div>initially everything is set to zero. When we type it counts well. But when we clear the textbox, Lines shows value as 1 eventhough there is no texts in the textbox. How to make the line count zero?
I realized that splitting val make the length of it 1 even if it's empty:
// val is empty and it length is null
// But after splitting it would be one
val.split(/\r*\n/).length // 1
function wordCount( val ){
var wom = val.match(/\S+/g);
return {
charactersNoSpaces : val.replace(/\s+/g, '').length,
characters : val.length,
words : wom ? wom.length : 0,
lines : val.length ? val.split(/\r*\n/).length : val.length
};
}
var textarea = document.getElementById("text");
var result = document.getElementById("result");
textarea.addEventListener("input", function(){
var v = wordCount( this.value );
result.innerHTML = (
"<br>Characters (no spaces): "+ v.charactersNoSpaces +
"<br>Characters (and spaces): "+ v.characters +
"<br>Words: "+ v.words +
"<br>Lines: "+ v.lines
);
}, false);<textarea id="text"></textarea>
<div id="result"></div>When a string is split, if none of the delimiters match, you'll be left with the original string.
const foo = 'foo';
console.log(foo.split(/bar/).length);The same is true of the empty string - when split on, it'll still give you [''], which has a length..
You might match lines which have at least one character on them instead of splitting, thereby excluding empty lines.
lines: (val.match(/^./gm) || []).length
If you split an empty string, the result is [""] -- an array with one element that's an empty string.
You can check for this case first with a conditional expression.
Also, there's no need to use \r* in the split delimiter, as it doesn't influence the count.
function wordCount( val ){
var wom = val.match(/\S+/g);
return {
charactersNoSpaces : val.replace(/\s+/g, '').length,
characters : val.length,
words : wom ? wom.length : 0,
lines : val.length == 0 ? 0 : val.split('\n').length
};
}
var textarea = document.getElementById("text");
var result = document.getElementById("result");
textarea.addEventListener("input", function(){
var v = wordCount( this.value );
result.innerHTML = (
"<br>Characters (no spaces): "+ v.charactersNoSpaces +
"<br>Characters (and spaces): "+ v.characters +
"<br>Words: "+ v.words +
"<br>Lines: "+ v.lines
);
}, false);<textarea id="text"></textarea>
<div id="result"></div>