javascript textarea 每行计算字符数

Question

我正在尝试计算文本区域每一行中的字符数。

我尝试修改此代码以计算音节 http://jsfiddle.net/5Zwkq/19/ 但没有成功。任何帮助将不胜感激。

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>

Answer 1

.val() 导致此行出错：

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

删除它可以正确计算线的长度（至少在计算区域）。

至于计数器文本区域错误，您只是 jQuery 选择器错误。将您的元素 set_a_syllable_count 重命名为 set_a_content.

还有一个问题 - 当 textarea 为空时，它会抛出一个错误，因为您正在检查一个空的正则表达式结果（准确地说是 null）。当没有匹配的行时，您只需要防止计数代码执行：

if (arrayOfLines !== null) { ... counting 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>

Answer 2

我的建议是：

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>

Answer 3

我有点太慢了，但这里有一些代码，imo 可以用更少的努力实现同样的效果。

        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>

Answer 4

这是我的解决方案：

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

您还可以避免重复字符被计算在内，将它们从每一行字符串中删除：

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

完整代码：http://jsfiddle.net/bwnL9Lgg/3/

javascript textarea 每行计算字符数

javascript textarea count characters per line

javascript

jquery

textarea