自定義插件，添加類的選項

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瀏覽器中的保留字，並可能導致問題。