Using RegEx in View

Question

I have a controller like this:

function Ctrl( $scope ){

    $scope.str = " Misty Mountain Hop ";

}

And a view like this:

<div ng-controller="Ctrl">

    <p>{{ str }}</p>       <!-- This one is ok -->
    <p>{{ str.split( "Mountain")[0] }}</p>   <!--Even this one is fine too -->
    <p>{{ str.replace( /Mountain/ , "Plain" ) }}</p>  <!-- This one is bad -->

</div>

So if i try to use a replace method , it gives an error:

Syntax Error: Token 'Mountain' is unexpected ...

http://jsfiddle.net/H3ztj/

The question is : Why?

How can I reproduce that in the fiddle you linked to? Clicking "Run" doesn't produce any error, it just prints the code (unreplaced). — Tim Pietzcker
– Tim Pietzcker, Commented Oct 6, 2013 at 12:03
You can work around it by using the RegExp constructor: str.replace(new RegExp('Mountain'), 'Plain'). Note that there are no delimiters, you need to double all backslashes and modifiers go in a second parameter see MDN — Martin Ender
– Martin Ender, Commented Oct 6, 2013 at 12:03
BTW, why do you try to do this logic in HTML? I think HTML represents View (MVC) only — Maxim Shoustin
– Maxim Shoustin, Commented Oct 6, 2013 at 12:14
@MaximShoustin i have very specific use-case with my view , so i don't want to put this functionality in the scope.. — Ivan Chernykh
– Ivan Chernykh, Commented Oct 6, 2013 at 13:10

Joe White · Accepted Answer · 2013-10-06 14:04:25Z

4

Since your question was "Why?", the answer is that expressions in interpolation blocks are not JavaScript expressions, but Angular expressions. They look a lot like JavaScript (on purpose), but Angular uses its own parser to parse the code.

That way it can do more than just evaluate the expression once: it can also do things like analyze the dependencies, so it can watch the ingredients and update when those ingredients change. It can also evaluate the expression relative to the $scope, so that {{foo}} returns $scope.foo rather than a global variable called foo (which in turn makes things like ngRepeat work).

When the Angular team implemented Angular expressions, they obviously didn't implement regular expressions. That's not surprising -- that kind of code should be in your controller anyway, where you can test it.

answered Oct 6, 2013 at 14:04

Joe White

98.3k64 gold badges227 silver badges335 bronze badges

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

1 Comment

Ivan Chernykh Over a year ago

great , thanks! the reason it is not working is slashes in the replace(/Mountain/ , when this syntax is 100% works: replace("Mountain" , so seems like Angular team simply forgot to implement it :)

Collectives™ on Stack Overflow

Using RegEx in View

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related