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) { ... counting code ... }

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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<textarea rows="8" cols="3" class="alignright" name="set_a_content" readonly="readonly" /></textarea>
<textarea rows="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");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<textarea rows="8" cols="3" class="alignright" name="set_a_syllable_count" readonly="readonly" /></textarea>
<textarea rows="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.

        function count() {

            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);
            }
        }

    <textarea id="area"></textarea>
    <br />
    <button onclick="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/