javascript - 调整 jQuery 字数计数器以将 URL 计为 3 个字

Question

我正在使用 jquery 的计数器插件 (http://wplayground.comuv.com/counter/) 并在我们的页面中成功实现了它。但我需要对其进行调整，但我不确定它应该去哪里。

基本上，脚本会计算字符数(在我们的例子中是单词数)，并在用户达到目标时停止输入。这部分工作正常。不过现在，我需要进行调整，以便如果用户输入 example.com 之类的 URL，则该词被计为 3 个词而不是 1 个。在我们网站的前一个版本中，开发人员编写了自定义 javascript 来完成任务，并考虑到 URL 的事情，他做了以下更改:

 if(getWord.indexOf(".com")>=1 || getWord.indexOf(".net")>=1 || getWord.indexOf(".org")>=1 || getWord.indexOf(".biz")>=1 || getWord.indexOf(".gov")>=1 || getWord.indexOf(".edu")>=1 || getWord.indexOf(".mobi")>=1 || getWord.indexOf(".info")>=1 || getWord.indexOf(".ca")>=1 || getWord.indexOf(".us")>=1 || getWord.indexOf(".mil")>=1){///Email
    pk1 = pk1+3;

所以，下面是新的 jquery 计数器。我该如何调整它来做同样的事情？

/*
   jQuery (character and word) counter
   Copyright (C) 2009  Wilkins Fernandez

   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation, either version 3 of the License, or
   (at your option) any later version.

   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
(function($) {
    $.fn.extend({
        counter: function(options) {
            // Set the default values, use comma to separate the settings
            var defaults = {
                type: 'char',   // {char || word}
                count: 'down',  // count {up || down} from or to the goal number
                goal: 140       // count {to || from} this number                
            };
            var options = $.extend({}, defaults, options);
            var flag = false;   // Set to true when goal is reached

            // Loop through each instance of the object that being is passed (the users selector).
            // Allows for multiple instances of the jQuery methods available to THIS (instance of the) object
            // (you can use this plug-in more than once on a page).
            return this.each(function() {
                var msg;
                var $obj = $(this);

                // Sets the appropriate message based on the options
                function get_msg_equation(objLength) {
                    // Make sure that the right values are set
                    if (typeof options.type !== 'string') {
                    } else {
                        switch (options.type) {
                            case 'char':
                                if (options.count === 'down') {
                                    msg = " character(s) left";
                                    return (options.goal - objLength);
                                }
                                else if (options.count === 'up') {
                                    msg = " characters (" + options.goal + " max)";
                                    return objLength;
                                }
                                break;
                            case 'word':
                                if (options.count === 'down') {
                                    msg = " word(s) left";
                                    return (options.goal - objLength);
                                }
                                else if (options.count === 'up') {
                                    msg = " words (" + options.goal + " max)";
                                    return objLength;
                                }
                                break;
                            default:
                        } //END switch
                    } // END if
                } // END function

                // * Initialize *: the bind event needs an object to bind to
                $('<div id=\"' + this.id + '_counter\"><span>' + get_msg_equation($($obj).val().length ) + '</span>' + msg + '</div>').insertAfter($obj);

                // Cache the counter selector
                var $currentCount = $("#" + this.id + "_counter" + " span");

                // Bind events to a function that returns the length
                // of the characters || words in the given text field.
                $obj.bind('keyup click blur focus change paste', function(new_length) {
                    // Update characters depending on the option selected
                    switch (options.type) {
                        case 'char':
                            new_length = $($obj).val().length;
                            break;
                        case 'word':
                            if ($obj.val() === '') {
                                new_length = 0;
                            }
                            else {
                                new_length = $.trim($obj.val())
                                    .replace(/\s+/g, " ")
                                    .split(' ').length;
                            }
                            break;
                        default:
                    } // END switch

                    // Set flag TRUE when counter reaches goal
                    switch (options.count) {
                        case 'up':
                            if (get_msg_equation(new_length) >= options.goal && options.type === 'char') {
                                $(this).val($(this).val().substring(0, options.goal));
                                flag = true;
                                break;
                            }
                            if (get_msg_equation(new_length) === options.goal && options.type === 'word') {
                                flag = true;
                                break;
                            } else if (get_msg_equation(new_length) > options.goal && options.type === 'word') {
                                $(this).val("");
                                $currentCount.text("0");
                                flag = true;
                                break;
                            }
                            break;
                        case 'down':
                            if (get_msg_equation(new_length) <= 0 && options.type === 'char') {
                                $(this).val($(this).val().substring(0, options.goal));
                                flag = true;
                                break;
                            }
                            if (get_msg_equation(new_length) === 0 && options.type === 'word') {
                                flag = true;
                            } else if (get_msg_equation(new_length) < 0 && options.type === 'word') {
                                $(this).val("");
                                flag = true;
                                break;
                            }
                            break;
                        default:
                    } // END switch

                    // Listen on keydown to catch the last character or word typed
                    // and prevent the user from typing
                    $obj.keydown(function(event) {
                        if (flag) {
                            this.focus();
                            // Listen for delete & backspace
                            if ((event.keyCode !== 46 && event.keyCode !== 8)) {
                                if ($(this).val().length > options.goal && options.type === 'char') {
                                    $(this).val($(this).val().substring(0, options.goal));
                                    return false;   // Stop the default action (typing)
                                    // Listen for blank (spacebar) & return 
                                } else if (event.keyCode !== 32 && event.keyCode !== 8 && options.type === 'word') {   //Allow to continue typing last word
                                    return true;
                                } else {
                                    return false;   // Stop the default action (typing)
                                }
                            } else {
                                flag = false;
                                return true;
                            }
                        }
                    }); // END keydown
                    $currentCount.text(get_msg_equation(new_length));
                }); // END Bind
            }); //END return
        } // END counter function
    }); // END extend
}) // END function
(jQuery); // Return jQuery object

Answer 1

在计数器插件文件的中间，有一行看起来像这样:

else{
  new_length = $.trim($obj.val())
    .replace(/\s+/g, " ")
    .split(' ').length;
}

好像这里就是统计字数的地方。它会抓取框中的文本，按空格拆分，然后对元素进行计数。

您可以在此处为 URL 添加某种检查(正则表达式)，然后相应地增加 new_length。

像这样(未经测试):

else{
  var str = $.trim($obj.val())
    .replace(/\s+/g, " ");
  new_length = str.split(' ').length;
  var URLs = str
    .match(/([^\s])+\.(com|net|org|biz|gov|edu|mobi|info|ca|us|mil)/g);
  if(URLs != null && URLs.length > 0){
    new_length += (URLs.length*2);
  }
}