Question

我正在尝试创建一个jQuery版本的php的wordwrap函数 - 我之前问了一个关于这个的问题，并且是针对this javascript函数的，这正是我正在寻找的，除了我可以不能让它与jQuery友好相处 - 大多数时候我认为是出于无知。

我决定尝试将我提供的代码改编成jQuery插件 - 为了好玩，因为我找不到任何可以做我想要的东西，因为我认为这将是一个很好的学习经历，但我可以不开始工作 -

这是原始的javascript：

function wordwrap( str, width, brk, cut ) {

    brk = brk || '\n';
    width = width || 75;
    cut = cut || false;

    if (!str) { return str; }

    var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\\S+?(\\s|$)');

    return str.match( RegExp(regex, 'g') ).join( brk );

}

然后我的jQuery - 我认为可能都错了：

  $.fn.wordwrap = function(options) {
    var settings = $.extend({
      'brk': '<br>',
      'width': '5',
      'cut': 'false'
    }, options);

    var regex = '.{1,' +settings.width+ '}(\\s|$)' + (settings.cut ? '|.{' +settings.width+ '}|.+$' : '|\\S+?(\\s|$)');

    return this.html(function(i, html) {
      return text.html(RegExp(regex, 'g')).join(settings.brk);
    });

我对插件创作的经验有限。我已经阅读了http://docs.jquery.com/Plugins/Authoring的jQuery指南，我觉得我正在做一切正常但是在调用元素时没有做任何事情，例如：

$('#foo').wordwrap({'width' : '25'});

我在chrome web inspector上没有收到任何错误，但我的页面上没有任何错误......

我认为问题在于函数末尾的返回字符串 - 我猜我没有在那里做正确的事情以获得所需的输出

任何帮助都非常感谢！

更新：知道了谢谢！这是我正在使用的最终脚本：

  $.fn.wordwrap = function(options) {
    var settings = $.extend({
      'brk': '<br>',
      'width': '75',
      'cut': 'false'
    }, options);

    var regex = '.{1,' +settings.width+ '}(\\s|$)' + (settings.cut ? '|.{' +settings.width+ '}|.+$' : '|\\S+?(\\s|$)');

    return this.html(function(i, html) {
      var match = html.match(RegExp(regex, 'g'));
      if (match != null) {
        return match.join(settings.brk); 
      }
    });

Answer 1

您不会从这样的jQuery插件返回文本，而是返回您正在处理的集合。这使链接起作用。

我认为这就是你想要的......

$.fn.wordwrap = function(options) {
    var settings = $.extend({
        'brk': '<br>',
        'width': '75',
        'cut': 'false'
    }, options);

    var regex = '.{1,' + settings.width + '}(\\s|$)' + (settings.cut ? '|.{' + settings.width + '}|.+$' : '|\\S+?(\\s|$)');


    return this.text(function(i, text) {
              return text.match(RegExp(regex, 'g')).join(settings.brk);
           });

};

您还应将cut选项更改为默认为false。将它包裹在一个字符串中只会让事情变得更难。 width选项也应该只是Number。

Answer 2

我花时间把它变成了基于jQuery documentation的插件。您可以从this jsfiddle获取它，您也可以在其中进行测试。我也在下面发布了它，所以你可以检查它而不必去jsfiddle.net。它支持链接，并检查以确保应用它的对象在尝试包装之前具有text属性。

(function ($) {
    var settings = {
        brk: '<br />',
        width: '75',
        cut: 'false'
    }, methods = {
        init : function( options ) {     
            var regex,
                t = $(this),
                txt = t.text();

            settings = $.extend(settings, options);

            regex = '.{1,' + settings.width + '}(\\s|$)' + (settings.cut ? 
                            '|.{' + settings.width + '}|.+$' : 
                            '|\\S+?(\\s|$)')

            if (txt && txt !== '') {            
                t.html(txt.match(RegExp(regex, 'g')).join(settings.brk));
            }

            return t;
        }
    };

    $.fn.wordwrap = function( method ) {  
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.wordwrap.' );
        }      
    };
}(jQuery));

jQuery自定义函数未按预期返回

2 个答案: