javascript - Textarea和音节计数器。 [JQuery/Javascript]

我有两个文本区域；
文本区域1包含标准文本，
Textarea#2包含音节总数
它们工作正常，但在换行时不对齐。
我觉得这里的代码片段包含了我的问题；

    function $count_how_many_syllables($input) {
        $("[name=set_" + $input + "]").keyup(function () {
            var lines = $("[name=set_" + $input + "]").val().split(/\n/);
            var arrayOfLines = [];
            for (var i=0; i < lines.length; i++) {
                arrayOfLines.push($.trim(lines[i]));
            }
            var $content;
            var $word = 0;
            var $syllable_count = "";
            var $result = "";

            for (var i = 0; i < 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);

这是一个JsFiddle:http://jsfiddle.net/tq3zzhna/（键入一些内容，您将看到我的问题）

最佳答案

问题是您用来分割行的正则表达式。因为您只是找到每一组行（即非换行符），所以不考虑0个字符的空行。更好的方法是通过换行符split，因此空行包括：
这与可选的回车和换行符匹配：
var arrayOfLines = $("[name=set_" + $input + "]").val().split(/\r?\n/);
一旦修复，另一个问题是您正在检查将包含空行的$content.length < 3。解决方法是只在$content.length > 0的情况下查找单词count。
最后，您可以键入没有元音的单词，这些单词当前会破坏音节匹配（match()返回空值），因此我添加了一些技巧来处理它，您可能可以做得更好：

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

        // split into separate lines
        var arrayOfLines = $("[name=set_" + $input + "]").val().split(/\r?\n/);
        var $content;
        var $word = 0;
        var $syllable_count = "";
        var $result = "";

        for (var i = 0; i < arrayOfLines.length; i++) {
            $content = arrayOfLines[i].toLowerCase();
            var word = $content.length;
            // if we have content, find the syllables
            if($content.length > 0) {
                word = ($content.replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '')
                    .replace(/^y/, '')
                    .match(/[aeiouy]/g) || 'a').length; // handle word with 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/