Question

我正在尝试编写我的第一个小插件，而且我有点碰壁。

我的插件是一个简单的.replace（）函数，可以找到openReplace和closeReplace 值是，并使用我的tagOpen和tagClose值切换它们。

我遇到的问题是在调用var colorText之前抓取我的选项我希望能够在正在使用的tagOpen值中添加一个类，并且能够在我的选项中更改它，基本上只需让使用它的用户可以在调用函数时自由使用自己的类名，并在选项中设置类名。

希望有意义并随时向我提供有关插件代码结构的反馈。

由于

(function($){

  $.fn.TextColor = function(options) {  

    var defaults = {
      class            :'',
      openReplace      :'{',
      closeReplace     :'}',
      tagOpen          :'<span>',
      tagClose         :'</span>'
    };

    return this.each(function() {        

      if ( options ) { 
        $.extend( defaults, options );
      }

      var obj = $(this);

      //Add a var to be able to add a class to tagOpen here and replace with defaults.tagOpen in the colorText variable below

      var colorText = obj.html().replace(defaults.openReplace,defaults.tagOpen).replace(defaults.closeReplace,defaults.tagClose);

      obj.html(colorText);


    });

  };
})( jQuery );

Answer 1

使用JQuery构建标记的正则表达式怎么样：

(function($){
    $.fn.TextColor = function(options) {

var defaults = {
  className        :'myClass',
  openReplace      :'{',
  closeReplace     :'}',
  openTag          :'<span>',
  closeTag         :'</span>'
};

if ( options ) { 
    $.extend( defaults, options );
 }

return this.each(function() {        
    var $obj = $(this);
    var html = = obj.html();
    var regex = new RegExp(defaults.openReplace + '(.+?)' + defaults.closeReplace, 'gi');

    html = html.replace(regex, function(outerMatch, innerMatch) {
         var wrapper = $("<div>");
         var tag = $(defaults.openTag)
                       .addClass(defaults.className)
                       .html(innerMatch)
                       .appendTo(wrapper);

     return wrapper.html();                 
   });

   obj.html(colorText);

});

}; })( jQuery );

注意：您应该避免使用类，因为它是IE中的保留字，可能会导致问题。

自定义插件，添加类的选项

1 个答案: