[RESOLVED] Problem with replacing non-alphanumeric characters.

[Derokorian]

Hi guys,

I'm trying to make a simple plugin that formats a phone number. If I use the regex outside of the plugin it works fine, however inside the plugin it seems to only replace the first time. After that you can add any characters you want and it stays, completely ruining the formatting if you have to go back and add a number at the beginning or what have you.

So here's the plugin code:

(function ($) {
    $.fn.Format = function (type) {
        type = type.toLowerCase();
        if (type == 'phone') {
            return this.bind("blur.Format", function () {
                var val = $(this).val().replace(/[^a-zA-Z0-9]+/,'');
                var prefix = "";
                if (val.length > 0) {
                    if (val.substring(0, 1) == "1") {
                        prefix = "1";
                        val = val.substring(1);
                    }
                    if (val.substring(0, 1) != "(") {
                        val = "(" + val;
                    }
                    if (val.length > 4 && val.substring(4, 5) != ")") {
                        val = val.substring(0, 4) + ")" + val.substring(4);
                    }
                    if (val.length > 8 && val.substring(8, 9) != "-") {
                        val = val.substring(0, 8) + "-" + val.substring(8);
                    }
                    if (val.length > 13 && val.substring(13, 14) != " ") {
                        val = val.substring(0, 13) + " " + val.substring(13);
                    }
                }
                $(this).val(prefix + val);
            });
        } else {
            return this;
        }
    };

})(jQuery);

And here is it on jsfiddle so you can see what's happening for yourself. Basically you put in your phone number the first time and it put the parens around the area code and what not. But the second time, say you forgot a number in your area code. If you go back and put it in, it keeps the current ) and adds a new one.

http://jsfiddle.net/AaBxp/

Thanks for any pointers you might have.

[jeepin81]

You need to confirm the amount of characters being submitted. Right now you just add '()' , '(', ')' onblur and you don't double check that the correct amount was entered. ie at least 10 char's.

[Derokorian]

Actually, I check the length before adding each character.

                    if (val.length > 4 && val.substring(4, 5) != ")") {
                        val = val.substring(0, 4) + ")" + val.substring(4);
                    }

Anyway that has nothing to do with the issue at hand which is that the following line doesn't seem to be properly removing non-alphanumeric characters every time like its supposed to.

var val = $(this).val().replace(/[^a-zA-Z0-9]+/,'');

[Weedpacket]

One thing I notice is that you're using .bind, which has been deprecated in favour of .on

JavaScript doesn't automatically apply regexp replacements globally the way PHP does; you need to add a [font=monospace]g[/font] modifier to the end of the regexp for that. Otherwise it stops after making one replacement (like preg_replace($pattern, $replacement, $subject, 1)).

[Derokorian]

Thank you Weedpacket! The g modifier is EXACTLY what I needed. Ugh I got stuck for a day on that, and decided I would just post and give up on it for now.