Regular Expression not matching in JavaScript and AngularJS with ng-change

Question

I am trying to get my path variable in this page to change the spaces and punctuation characters, as the user types it in. Here is the corresponding code:

<!doctype html>
<html lang="en-US" ng-app>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>ng-change</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css" media="all"/>
    <script type="text/javascript" src="angular_1.0.7.js"></script>
</head>
    <body>
        <div class="browser" ng-controller="Browser">

            <!--Mock browser URL-->
            <div class="url">
                &larr; &rarr; &infin;
                <input type="text" value="edit/{{ path }}"/>
            </div>

            <!--Input field for the page, mock page-->
            <div class="page">
                <label for="update">
                    Update the URL:
                    <input ng-change="clean()" ng-model="path"/>
                </label>
            </div>

        </div>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

However, when I type anything in, nothing happens. Here is the script.js file:

var Browser = function ($scope) {
    $scope.clean = function () {

        $scope.path = $scope.path
                        .replace("/\s+/g", "-")
                        .replace("/[^a-z0-9-]/i", "");
        console.log($scope.path);
    };
};

I am quite sure I've gotten my javaScript right, but I don't know why exactly my app is not working, I tried debugging it, the problem seems to be that ng-change is only considering it a change when characters other than spaces are put in, whenever spaces are put in, it ignores them.

Those aren't regular expressions; they're strings. The syntax for a regex is `/stuff here/` (without quotes around them). Otherwise, the `.replace()` method attempts to find that exact text, and only replaces the *first* match — Ian, Aug 06 '13 at 16:48
`ng-change` might ignore whitespace. you could try using `$scope.$watch` and see if that works — user428517, Aug 06 '13 at 16:51
@Ian: I get what you mean now. You actually open and close them with / and /. How silly of me. Thanks, if you give me an answer, I'd be happy to accept it. — Games Brainiac, Aug 06 '13 at 16:54
@GamesBrainiac note that you don't *have* to use `//`. in fact i never do because i often want to use slashes in my regexes. you can use almost any pair of characters. i'm fond of `~~`. — user428517, Aug 06 '13 at 16:56
@sgroves: Thanks for the tip, will do that from now on, I kind of prefer it, since sometimes slashes can give you problems. — Games Brainiac, Aug 06 '13 at 16:58
@sgroves What do you mean using `~~`? If you want slashes in your regex, you can escape them — Ian, Aug 06 '13 at 16:59
@ian of course. but i don't like having to escape my slashes. makes the regex harder to read (i do lots of html matching with regexes in vim, for instance). however, i rarely need to match tildes with regexes, so i use `~~` as my standard regex delimiter. the primary purpose of my comment was to point out that you don't have to use slashes, which people new to regexes don't usually know. — user428517, Aug 06 '13 at 17:00
@sgroves I'm just confused by what you mean as "regex delimiter". Can you give an example using `~~`? — Ian, Aug 06 '13 at 17:00
@sgroves, yea, I just checked up the docs on this, did you manually change the delimiters? — Games Brainiac, Aug 06 '13 at 17:02
@ian for example, `~^\s+$~` and `/^\s+$/` are the same thing ... wait, does javascript not allow alternative delimiters or something? — user428517, Aug 06 '13 at 17:03
@sgroves You're kidding, right? In JavaScript, you can only use `//` and `new RegExp`. Or am I misunderstanding something completely? Try your code at http://jsfiddle.net/ — Ian, Aug 06 '13 at 17:05
@Ian: I think he manually changed the delimiters or something, because I, like you cannot reproduce what he's written. — Games Brainiac, Aug 06 '13 at 17:06
@sgroves Pretty sure JavaScript only allows `/ /` for regexes. I kept getting illegal character or syntax errors when trying `~ ~` in the Chrome console. — ajp15243, Aug 06 '13 at 17:06
@GamesBrainiac My point is that you *can't* in JavaScript, that's why I'm confused. It looks like you can in other languages, and that's what they're talking about — Ian, Aug 06 '13 at 17:07
@sgroves I think you're referring to using `new RegExp()`, which does not require delimiters at all, and accepts a string that represents a regular expression. — Ian, Aug 06 '13 at 17:08
@sgroves Hey, calm down :) JavaScript just has specific ways to do things, and with regular expressions, you can only do it two ways, and can't change the delimiter. What you're saying is helpful to know about other languages, because I'm not sure I knew that (I don't think I've worked with regex much outside of JavaScript, so I wouldn't have thought of that) — Ian, Aug 06 '13 at 17:09
ah @ian ok, makes sense. i do usually use `RegExp` come to think of it. (i rarely use regexes in javascript) — user428517, Aug 06 '13 at 17:09
@sgroves The only thing with `RegExp` is that you have to double escape special regex chars. For example, if you wanted to match a `?`, you'd use `/\?/g` or `new RegExp("\\?")` (although it's trivial to use this because you could easily use `[?]`, but that's just an example) — Ian, Aug 06 '13 at 17:11

score 3 · Accepted Answer · answered Aug 06 '13 at 16:57

3

Your "regular expressions" are strings, not regular expression objects. The two ways to create a regex object are:

new RegExp("regex string", "flags")
// and
/regex stuff/flags

Remove the quotes from your code .replace("/\s+/g", "-") so they become .replace(/\s+/g, "-").

The .replace() method does accept a string (as well as a regex), but attempts to find the first occurrence of that exact text instead of using the regex in the string.

References:

answered Aug 06 '13 at 16:57

Ian

50,146
13
101
111

1

Thanks a lot Ian. I hate it when sometimes, you make the stupidest mistake. :( I've been trying to solve this in all kinds of ways, through debugging, comparing code, and it ends up being that simple. Its like the longer you spend trying to solve it, the further away you become. – Games Brainiac Aug 06 '13 at 17:01
@GamesBrainiac Hey, it's no problem at all. That's what StackOverflow is for, among many things :) – Ian Aug 06 '13 at 17:01

Regular Expression not matching in JavaScript and AngularJS with ng-change

1 Answers1