Javascript - creating a new Array method

Question

I would like to extend the Javascript built-in Array object by addind a new method: searchByRegexp

Basically the method will get a regexp as input and will return:
_ a string representing the element of the array that matches the regexp (if more than one match, the first one will be returned)
_ an empty string if none of the elements matches the regular expression.

What is blocking you ? Adding a function to the prototype, doing that specific function ... ? What have you tried ? — Lepidosteus
– Lepidosteus, Commented Oct 11, 2011 at 18:26
Just for interest or maybe convenience there are libraries which already do this. See Enumerable.grep for example. — clockworkgeek
– clockworkgeek, Commented Oct 11, 2011 at 22:42

canon · Accepted Answer · 2011-10-12 00:18:35Z

7

Quick and dirty (fiddle for your fiddling pleasure):

Array.prototype.searchByRegexp = function (rx) {
    for(var i = 0, ln = this.length; i < ln; i++) {
        // test item i
        if(rx.test(this[i])) {
            return this[i] + "";
        }
    }
    // return an empty string if no matches are found
    return "";
}

However, you may wish to implement more general methods instead...

Array.prototype.find = function(delegate) {   
    for(var i = 0, ln = this.length; i < ln; i++) {
        if(delegate(this[i])){
            return this[i];   
        }
    }
    return null;
}

Array.prototype.findAll = function(delegate) {   
    var results = [];
    for(var i = 0, ln = this.length; i < ln; i++) {
        if(delegate(this[i])){
            results.push(this[i]);   
        }
    }
    return results ;
}

Array.prototype.each = function (delegate) {
    for (var i = 0, ln = this.length; i < ln; i++) {
        delegate(this[i], i);
    }
}

... which could then perform regex comparison like so:

// test values
var sizes = ["Small", "Medium", "Large", "Extra-Large", "Extra-Extra-Large"];

// Print single value or blank
document.write(sizes.find(function(size){
    return /large/i.test(size);
}) || "");     

// horizontal rule to separate our results
document.write("<hr/>");

// Print all matches
sizes.findAll(function(size){
    return /large/i.test(size);
}).each(function(size){
    document.write(size + "<br/>"); 
});

edited Oct 12, 2011 at 0:18

answered Oct 11, 2011 at 18:26

canon

41.9k10 gold badges77 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan Over a year ago

Great answer, thanks. I would like to put all those extra functions in a file. Is there a convension for its name? I mean, for a file extending the prototype of a built-in javascript object.

canon Over a year ago

I'm not aware of any file-naming conventions for prototype extensions.

Daniel Lemos de Morais · Accepted Answer · 2020-04-22 15:33:21Z

5

As of today, using Google Chrome, the provided solution breaks the iteration over the array.

After Array.prototype.searchByRegexp = function ..., if you iterate with for (var k in arrayInstance), the value searchByRegexp will be in the keys, not only the real array keys.

To prevent that you should use Object.defineProperty(Array.prototype, ...

Object.defineProperty(Array.prototype, 'searchByRegexp', {
    value: function (rx) {
        for(var i = 0, ln = this.length; i < ln; i++) {
            // test item i
            if(rx.test(this[i])) {
                return this[i] + "";
            }
        }
        // return an empty string if no matches are found
        return "";
    },
    enumerable: false
});

edited Apr 22, 2020 at 15:33

answered Apr 22, 2020 at 15:16

Daniel Lemos de Morais

1211 silver badge5 bronze badges

Collectives™ on Stack Overflow

Javascript - creating a new Array method

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related