Javascript Textarea Count Characters Per Line

I'm attempting to count the characters in each line of a textarea. I've tried to adapt this code for counting syllable http://jsfiddle.net/5Zwkq/19/ with no success. Any help would

Solution 1:

The .val() is causing an error in this line:

$result = $content.val().length;

Removing it properly counts the line lengths (at least in the calculations area).

As for the counter textarea bug, you just got the jQuery selector wrong. Rename your element set_a_syllable_count to set_a_content.

There is one more problem - when textarea is empty, it throws an error because you are checking an empty regexp result (null, to be precise). You simply have to prevent counting code to execute when there are no matched lines:

if(arrayOfLines!==null) { ...countingcode... }

Fixed code:

function$CharCount($input) {
  $("[name=set_" + $input + "]").keyup(function() {

    var arrayOfLines = $("[name=set_" + $input + "]").val().match(/[^\r\n]+/g);
    var tempArr = [];
    var $content;
    var char;
    var $result;

    if (arrayOfLines !== null) {
      for (var i = 0; i < arrayOfLines.length; i++) {
        $content = arrayOfLines[i];
        $result = $content.length;
        tempArr.push($result);
      }
    }

    $("[name=set_" + $input + "_content]").val(tempArr);

  });
}

(function($) {
  $CharCount("a");
})(jQuery);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><textarearows="8"cols="3"class="alignright"name="set_a_content"readonly="readonly" /></textarea><textarearows="8"cols="30"name="set_a"></textarea>

Solution 2:

My proposal is:

function$count_how_many_syllables($input) {
  $("[name=set_" + $input + "]").keyup(function (e) {

    var arrayOfLines = $("[name=set_" + $input + "]").val().match(/[^\r\n]+/g);
    var tempArr = [];
    var $charsPerLine;

    for (var i = 0; i < arrayOfLines.length; i++) {
      $charsPerLine = arrayOfLines[i].length;
      tempArr.push($charsPerLine);
    }

    $("[name=set_" + $input + "_syllable_count]").val(tempArr.join('\n'));

  }).trigger('keyup');
}

$(function () {
  $count_how_many_syllables("a");
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textarearows="8"cols="3"class="alignright"name="set_a_syllable_count"readonly="readonly" /></textarea><textarearows="8"cols="30"name="set_a">i would appreciate
any help
at all</textarea>

Solution 3:

I was a little bit too slow but here is some code which imo achieves the same with much less effort.

functioncount() {

            var lines = document
                .getElementById("area")
                .value
                .split("\n");

            var lengths = [];

            for (var i = 0; i < lines.length; i++) {
                var lineLength = lines[i].length;
                document.write(lineLength+ "</br>");
                lengths.push(lineLength);
            }
        }

<textareaid="area"></textarea><br /><buttononclick="count();">Count</button>

Solution 4:

This is my solution:

var lines = $(input).val().match(/[^\r\n]+/g);
    var count = [];
    var content;
    for (var i = 0; i < lines.length; i++) {
        content = lines[i].split(" ").join("");
        count.push(content.length);
    }

You can also avoid repeat characters to by counted, removing them from each line string:

content = content.split(" ").join("");
content = content.replace(/(.)(?=.*\1)/g, "");
count_no_repeat.push(content.length);

Complete code: http://jsfiddle.net/bwnL9Lgg/3/