Question

I’m trying to write my first small plugin and I’ve sort of hit a wall.

My plugin is a simple .replace() function that finds whatever the openReplace and closeReplace
values are and switches them with my tagOpen and tagClose values.

The problem I’m having is before var colorText is called that grabs my options I want to be able to add a class to the tagOpen value that is being used and be able to change it in my options, basically just let users who use this to have the freedom to use their own class names when they call the function and set a class name in the options.

Hope that makes sense and feel free to give me feedback on the code structure of my plugin.

Thanks

(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

How about a regex + building the tag with 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 );

note: you should probably refrain from using class as it is a reserved word in IE and might cause problems.