Extending Native String with SliceWord Function

The sliceWord function easily slice out a section of words from a string. This may be useful for form validation, DOM class manipulation, test replacement, and a whole lot more. The method is attached to "String.prototype", but could be easily modified to be standalone. Up to two optional parameters can be applied, where the first parameter is the word index to start (start index) slicing from, and the second parameter is the index of the word to stop slicing at (sliceWord works much like "Array.slice"). If the stop index is not provided, then all words after and including the word at the start index will be returned. If the start index is larger than the number of words in the string, then NULL is returned. However, when no or invalid parameters are provided the string itself is returned, and if the stop index exceeds the number of words in the string, then the method will return the whole string after and including the start index.

Example 1: String.prototype.sliceWord

String.prototype.sliceWord = function(i, j) {
    var args = arguments,
        str =  + this,
        m = 0 < i ? i : 0,
        n = 0 < j ? j : 0,
        _split = str.split();

    // if no args are sent, then return str
    if (args.length) {
        if (_split.length < m) {return;}
        str = (1 < args.length && n < _split.length ? _split.slice(m, n) : _split.slice(m)).join();

    return str;

This method is particularly helpful, when designer use CSS classes to style the markup. Generally, the first class is going to be provided by the designer and it will apply the defaults styles. Additional, classes can be applied by the JavaScript engineer in response to user interactions with the page to change styles. For example, suppose there is an input node with the class button, which also has the class disabled applied to it. By default "input.button" styles make the button look like a standard HTML button, however, when input.button.disabled is applied, the button grays out an looks disabled. The JavaScript adds the disabled class to the button when the form is incomplete, but the button class always removes. Once the form validates the JavaScript needs to remove the disabled class, so we could use the following:

Example 2: dom_removeClasses Function

var dom_removeClasses = function(elem, i) {
    var node = YAHOO.util.Dom.get(elem);
    if (! node) {return;} // safety measure
    node.className = node.className.sliceWord(0, i);
dom_removeClasses(myButton, 1);

Example 2 will remove all classes applied to myButton, except the first one (button). Now, this example is relatively simple, and sliceWord is probably overkill, because we know all the classes applied to button and there are only 2 classes. However, it becomes much more useful when a node can have any combination of 5 classes applied to it.

In the next release of Mint.com we frequently use this technique to normalize elements before applying additional classes to them. This helps to make the JavaScript code less fragile when design makes simple class changes or when they forget to remove classes from the views.