Using the global value in a Javascript replace() function causes ng-bind-html to malfunction

Question

Using the global value in a Javascript replace() function causes ng-bind-html to malfunction

When trying to utilize ng-bind-html alongside JavaScript's replace() function, everything works smoothly without using a global value in the replace(). However, as soon as I add something like replace(/test/g, 'TEST'), an error appears in the console:

Syntax Error: Token '/' not a primary expression at column 95

The code snippet that is causing the issue is as follows:

ng-bind-html="(resume.address == null || resume.address == '') ? 'Mailing Address' : resume.city.replace(/;/g, 'TEST')"

Is there an obvious mistake in my approach that I am missing? If so, what would be the correct way to structure this?

Edit:

My main objective is to substitute multiple ";" characters within a string with line break elements that AngularJS won't sanitize into a string literal. Any suggestions for a more effective method are also appreciated.

javascript angularjs replace ng-bind-html

Answer 1

Answer №1

While this may not directly address why angular is throwing the error, it can provide a workaround.

To tackle this issue, you can create a filter:

angular.module('customApp', []).filter('customFilter', function() {
  return function(input) {
    input = input || 'Mailing Address';
    return input.replace(/;/g, 'TEST')";
  };
})

In your HTML code, use:

ng-bind-html="resume.address | customFilter"

Answer 2

While this may not directly address why angular is throwing the error, it can provide a workaround.

To tackle this issue, you can create a filter:

angular.module('customApp', []).filter('customFilter', function() {
  return function(input) {
    input = input || 'Mailing Address';
    return input.replace(/;/g, 'TEST')";
  };
})

In your HTML code, use:

ng-bind-html="resume.address | customFilter"

Using the global value in a Javascript replace() function causes ng-bind-html to malfunction

Answer №1

Similar questions

Vue allows you to use regular expressions with arrays

Issue encountered when transferring properties to create a search bar

Is there a way to automatically activate the loader function once the form has been submitted?

Is there a way to set formArray values back to their default values without using form.reset(), which sets them to null?

Switch out the content within a div upon selection

Error encountered in ASP.NET MVC application when using jQuery POST method: data is null

Error in AWS Cloud Development Kit: Cannot access properties of undefined while trying to read 'Parameters'

The Protractor Chrome extension for Angular was not detected on the webpage

Exploring the functionality of window.matchmedia in React while incorporating Typescript

Having trouble aligning my slider in the center

A guide to transporting an item from coordinates {x,y} to {newx,newy} using Three.js

Adding PHP array to a JavaScript array

Tips for incorporating additional filter criteria into a jquery script

Fixing the issue of a div exceeding the height of its parent div in Tailwindcss

Is it possible to reposition the vertical scrollbar to a location that is not on the left or right side?

Is it common to encounter a "no such file or directory" error when running Docker-Compose with the command "ENTRYPOINT ['./init.sh']" in a Dockerfile?

How can the outer function be connected to the resolve method of $routeProvider?

The issue code R10, indicating a boot timeout, has arisen as the web process failed to connect to $PORT within 60 seconds of initiating on Heroku platform

a guide on showcasing a table according to a specific column's data (CSV Path)

Should we avoid using 'RedirectToAction' with AJAX POST requests in ASP.NET?