Create a stringToSlug() prototype function in javascript

Question

I have used the answers here as an examples although I would prefer to write it like this: value.stringToSlug()

So I have changed it to this:

// String to slug
String.prototype.stringToSlug = function(str) {
      str = str.replace(/^\s+|\s+$/g, ''); // trim
      str = str.toLowerCase();
      str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
               .replace(/\s+/g, '-') // collapse whitespace and replace by -
               .replace(/-+/g, '-'); // collapse dashes
      return str;
};

It works if I pass the string like this:

var value = $(this).val();
value.stringToSlug(value);

Is there another way to get the value of the string without passing it as a param? — John Magnolia, Oct 12 '12 at 14:30

score 13 · Accepted Answer · answered Oct 12 '12 at 14:32

13

If you're modifying any prototype you can take advantage of the fact that this refers to the object itself; in this case it points to the string you're calling the method on:

String.prototype.stringToSlug = function() { // <-- removed the argument
    var str = this; // <-- added this statement

      str = str.replace(/^\s+|\s+$/g, ''); // trim
      str = str.toLowerCase();
      str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
               .replace(/\s+/g, '-') // collapse whitespace and replace by -
               .replace(/-+/g, '-'); // collapse dashes
      return str;
};

Then call like this:

$(this).val().stringToSlug();

answered Oct 12 '12 at 14:32

Ja͢ck

170,779
38
263
309

This is the correct answer to the question, but I'd also recommend against doing it. There's no real advantage to doing it, and it makes your code somewhat less portable. – Paul Oct 12 '12 at 14:35
1

@Paul: What do you mean by "no advantage" and "less portable"? – gen_Eric Oct 12 '12 at 14:38
1

@Paul I always have an uneasy feeling about extending prototypes of native objects in JavaScript :) – Ja͢ck Oct 12 '12 at 14:41
2

I mean, attaching it to the prototype of the String object isn't better than just making a regular function (or a function on your own object). 'less portable' was probably the wrong term, I just meant that if someone else sees his code, it's less intention-revealing, and potentially error prone if the code is broken into multiple files. It's also generally considered a bad practice, as discussed here: http://perfectionkills.com/extending-built-in-native-objects-evil-or-not/ – Paul Oct 12 '12 at 14:43
@Jack: me too. Brings back nightmares of the early days of the Prototype library. – Paul Oct 12 '12 at 14:44
1

@RocketHazmat Can't speak for Paul, but it mixes domain specific logic to a generic class; for instance, it wouldn't make sense that the string "Hello world" can be 'slugged' :) – Ja͢ck Oct 12 '12 at 14:45
@Paul I see exactly now where this could cause problems, maybe it would be better to do this in jquery `$.fn`? The main reason I wanted to do it this was over a stand alone function, was for readability of the code e.g so that it's possible to write it as a chain and thought the String would of been the best. – John Magnolia Oct 12 '12 at 14:52
@JohnMagnolia: yeah, if you're going to use it a lot, I'd make it a jquery plugin as you suggest. – Paul Oct 12 '12 at 15:53

Create a stringToSlug() prototype function in javascript

1 Answers1