javascript - str.replace not working inside html - Stack Overflow

admin管理员组

文章数量:1425754

I need to replace all _ from a string in my angular app. In my controller, following code gives correct result:

alert("this_is_string_".replace(/_/g, " "));

But when I put the same code in my html file like this:

 <th class="text-center" ng-repeat="(key, value) in filteredEL[0] ">
    {{ key.replace(/_/g, ' ') }}
 </th>

it gives following error:

Error: [$parse:syntax] Syntax Error: Token '/' not a primary expression at column 13 of the expression [key.replace(/_/g, ' ')] starting at [/_/g, ' ')]

So, how can I use replace function that replaces all required instances inside the html?

I need to replace all _ from a string in my angular app. In my controller, following code gives correct result:

alert("this_is_string_".replace(/_/g, " "));

But when I put the same code in my html file like this:

 <th class="text-center" ng-repeat="(key, value) in filteredEL[0] ">
    {{ key.replace(/_/g, ' ') }}
 </th>

it gives following error:

Error: [$parse:syntax] Syntax Error: Token '/' not a primary expression at column 13 of the expression [key.replace(/_/g, ' ')] starting at [/_/g, ' ')]

So, how can I use replace function that replaces all required instances inside the html?

• javascript
• angularjs
• string
• replace

Share Improve this question Follow asked Aug 30, 2016 at 10:16 Tahreem IqbalTahreem Iqbal 1,02566 gold badges2121 silver badges4444 bronze badges 3

• {{ key.replace(/_/g, ' ') }} is considered as angular expression. – Mairaj Ahmad Commented Aug 30, 2016 at 10:18
• i know. Funny thing is {{ key.replace('_', ' ') }} works fine but it only removes first instance. I need to replace all of them. – Tahreem Iqbal Commented Aug 30, 2016 at 10:19
• 1 Just to provide more insights on why this doesn't work. The key.replace(/_/g, ' ') tries to use a regular expression to remove all occurences of that pattern. Here is an extract from the Angular docs You can't declare functions or create regular expressions from within AngularJS expressions. This is to avoid plex model transformation logic inside templates. Such logic is better placed in a controller or in a dedicated filter where it can be tested properly.. Ref: docs.angularjs/guide/expression – M22an Commented Aug 30, 2016 at 10:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Just create a dedicated filter :

angular.module('filters.stringUtils', [])

.filter('removeUnderscores', [function() {
    return function(string) {
        if (!angular.isString(string)) {
            return string;
        }
        return string.replace(/_/g, '');
    };
}])

and call it like :

<div id="{{'hi_there'| removeUnderscores}}"></div>

Using angular filter is the best practice to filter from html.

Have a look at angular-filter here

.filter('customFilter', ['$filter', function ($filter) {
    return function (input) {
      if (input) {
      	return input.replace(/_/g, '');
      }
		}
}])

<th class="text-center" ng-repeat="(key, value) in filteredEL[0] ">
    {{ key | customFilter}}
 </th>

You can use split and join.

<th class="text-center" ng-repeat="(key, value) in filteredEL[0] ">
{{ key.split('_').join('') }}</th>

本文标签： javascriptstrreplace not working inside htmlStack Overflow