Question

我有两个文字区域;

Textarea＃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/（输入内容，你会看到我的问题）

Answer 1

问题是你用来分割线的正则表达式。因为您只是找到每组线（即非换行符），所以您不会考虑带有0个字符的空行。更好的方法是换行符split，所以包含空行：

这匹配可选的回车符和换行符： var arrayOfLines = $("[name=set_" + $input + "]").val().split(/\r?\n/);

修复后的另一个问题是您正在检查包含空行的$content.length < 3。对此的解决方法是仅在$content.length > 0找到单词count。

最后你可以输入没有元音的单词，这些单词当前打破了音节匹配（match()返回null），所以我添加了一些黑客来应对它，你可以做得更好：

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/

Textarea和音节计数器。 [JQuery的/使用Javascript]

1 个答案: