Textarea's and syllable counter. [JQuery/Javascript] -

Textarea's and syllable counter. [JQuery/Javascript] -

i have 2 text areas;

textarea #1 contains standard text, textarea #2 contains total syllable count

they work fine dis-align on line breaks.

i have feeling snippet of code here contains issue;

function $count_how_many_syllables($input) { $("[name=set_" + $input + "]").keyup(function () { var lines = $("[name=set_" + $input + "]").val().split(/\n/); var arrayoflines = []; (var i=0; < lines.length; i++) { arrayoflines.push($.trim(lines[i])); } var $content; var $word = 0; var $syllable_count = ""; var $result = ""; (var = 0; < arrayoflines.length; i++) { $content = arrayoflines[i].tolowercase(); word = $content.replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '') .replace(/^y/, '') .match(/[aeiouy]/g).length; if ($content.length < 1) { $result = $result + "0\n"; } else { $syllable_count = word.tostring(); $result = $result + $syllable_count + "\n"; } } $("[name=set_" + $input + "_syllable_count]").val($result); // set scrolling $("[name=set_" + $input + "_syllable_count]").scrolltop = $("[name=set_" + $input + "]").scrolltop; $("[name=set_" + $input + "_syllable_count]").scrollleft = $("[name=set_" + $input + "]").scrollleft; }); } setinterval(function ($) { $count_how_many_syllables("a"); },100)(jquery);

here jsfiddle: http://jsfiddle.net/tq3zzhna/ (type , you'll see issue)

the problem regex using split lines up. because finding each grouping of lines (i.e. non-line breaks), not taking empty lines 0 characters account. improve approach split line breaks instead, empty lines included:

this matches optional carriage homecoming , line break: var arrayoflines = $("[name=set_" + $input + "]").val().split(/\r?\n/);

another issue 1 time fixed checking $content.length < 3 include empty lines. prepare find word count if $content.length > 0.

lastly can type words no vowels break syllable match (match() returns null), added bit of hack cope it, can better:

function $count_how_many_syllables($input) { $("[name=set_" + $input + "]").keyup(function () { // split separate lines var arrayoflines = $("[name=set_" + $input + "]").val().split(/\r?\n/); var $content; var $word = 0; var $syllable_count = ""; var $result = ""; (var = 0; < arrayoflines.length; i++) { $content = arrayoflines[i].tolowercase(); var word = $content.length; // if have content, find syllables if($content.length > 0) { word = ($content.replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '') .replace(/^y/, '') .match(/[aeiouy]/g) || 'a').length; // handle word no vowels if ($content.length <= 3) { word = 1; } } if (word !== 0) { $syllable_count = word.tostring(); $result = $result + $syllable_count + "\n"; } else { $result = $result + "0 \n"; } } $("[name=set_" + $input + "_syllable_count]").val($result); // set scrolling $("[name=set_" + $input + "_syllable_count]").scrolltop = $("[name=set_" + $input + "]").scrolltop; $("[name=set_" + $input + "_syllable_count]").scrollleft = $("[name=set_" + $input + "]").scrollleft; }); } (function ($) { $count_how_many_syllables("a"); })(jquery);

http://jsfiddle.net/tq3zzhna/3/

javascript jquery html css