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

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;

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

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

  });
}

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

<textarea rows="8" cols="3" class="alignright" name="set_a_syllable_count" readonly="readonly" /></textarea>
<textarea rows="8" cols="30" name="set_a"></textarea>

回答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>

回答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>

回答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>

回答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/

来源：https://stackoverflow.com/questions/39354969/javascript-textarea-count-characters-per-line

标签

javascript

jquery

textarea