How can I use that regex in angularJs expression?

Question

Here I have a string with spaces, and I would like to replace the space(s) to a single dash '-'.

var card = "A World Elite Warrior";

console.log("card = " + card.toLowerCase().replace(/ /g,'-'));

The output is a-world-elite-warrior, but I just want to use it in the html template as a angularjs expression like this:

<img ng-src="images/cards/{{card.toLowerCase().replace(/ /g,'-')}}.png"

And it can not work, the error message is:

Error: [$parse:syntax] Syntax Error: Token '/' not a primary expression at column 61 of the expression

Lex · Accepted Answer · 2019-01-31 16:49:49Z

2

AngularJS doesn't support regex in the view. To get around this you can write a simple filter to apply your regex replacement. Here's an example of how you might do this in your case.

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.card = "A World Elite Warrior";
    console.log("card = " + $scope.card.toLowerCase().replace(/ /g, '-'));
  })
  .filter('dashes', function() {
    return function(input) {
      input = input || '';
      return input.toLowerCase().replace(/ /g, '-');
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  {{ card | dashes }}
</div>

answered Jan 31, 2019 at 16:49

Lex

7,2732 gold badges31 silver badges49 bronze badges

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

1 Comment

Mellon Over a year ago

I did just like you suggested. it works well, thank you.

Mike V. · Accepted Answer · 2020-02-14 15:30:34Z

0

Another approach would be to create a $scope function that carries out the regular expression. You would then just call the function from your view:

$scope.cardChange = function() {
    return $scope.card.toLowerCase().replace(/ /g,'-');
};

<img ng-src="images/cards/{{cardChange()}}.png"

edited Feb 14, 2020 at 15:30

answered Feb 12, 2020 at 21:49

Mike V.

12 bronze badges

Collectives™ on Stack Overflow

How can I use that regex in angularJs expression?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related