Locate the unique symbol within an array

Question

Locate the unique symbol within an array

I am facing a challenge with validating user input in an input box where alphanumeric values are allowed along with certain special characters. I need to display an error message if the user enters a special character that is not supported by my application.

   var inputKey = "abcdfg34$@!"

My approach involves filtering out the special characters from the string first.

   var inp = inputKey.replace(/[a-zA-Z0-9]/g, ''); // Now ip = @!

$scope.specialchar contains a list of allowed special characters

   $scope.specialchar = [@,#,$,%,<,^,<];

   for(var i in $rootScope.specialChar ){

              if(( inp.indexOf($scope.specialChar[i].value) > -1 ))
                  {
                  $scope.charAllowedText = true;
                  count++;
                  }

          }
         if(count == 0) - display error messagae

The current code seems to be effective in detecting the occurrence of the first unsupported special character. In the given example, the character (!) is not on the approved list. However, when my string contains @! both conditions (count == 0) might fail as only one character is checked. I also aim to include which specific unknown special character was entered by the user in the error message.

I would appreciate any insights into what could be going wrong and how I can address this issue.

javascript angularjs string

Answer 1

Answer №1

Filtering Disallowed Characters with Regular Expressions

var allowed=['-','@'];
var regex=new RegExp('[a-z0-9'+allowed.join('')+']','ig');

var tests=[
  "holi-java",
  "@name",
  "@-#$@"
];


tests.forEach(function(test){
  console.log(JSON.stringify(test)+" contains disallowed characters:"+JSON.stringify(test.replace(regex,'')));
});

Using JavaScript to Filter Disallowed Characters

    var allowed=['-','@'];


    var tests=[
      "holi-java",
      "@name",
      "@-#$@"
    ];
    function findDisallowed(input){
       var rest=input.replace(/[a-z0-9]/g,'');
       var disallowed=[]; 
       for(var i in rest){
         if(allowed.indexOf(rest[i])==-1)
          disallowed.push(rest[i]);
       }
       return disallowed;
    }

    tests.forEach(function(test){
      console.log(JSON.stringify(test)+" disallowed characters found:"+JSON.stringify(findDisallowed(test)));
    });

Answer 2

Filtering Disallowed Characters with Regular Expressions

var allowed=['-','@'];
var regex=new RegExp('[a-z0-9'+allowed.join('')+']','ig');

var tests=[
  "holi-java",
  "@name",
  "@-#$@"
];


tests.forEach(function(test){
  console.log(JSON.stringify(test)+" contains disallowed characters:"+JSON.stringify(test.replace(regex,'')));
});

Using JavaScript to Filter Disallowed Characters

    var allowed=['-','@'];


    var tests=[
      "holi-java",
      "@name",
      "@-#$@"
    ];
    function findDisallowed(input){
       var rest=input.replace(/[a-z0-9]/g,'');
       var disallowed=[]; 
       for(var i in rest){
         if(allowed.indexOf(rest[i])==-1)
          disallowed.push(rest[i]);
       }
       return disallowed;
    }

    tests.forEach(function(test){
      console.log(JSON.stringify(test)+" disallowed characters found:"+JSON.stringify(findDisallowed(test)));
    });

Answer 3

Answer №2

To start off, it is important to wrap each character in the array with quotes when setting $scope.specialChar to ensure that they are read as strings:

$scope.specialchar = ['@', '#', '$', '%', '<', '^', '<'];

Furthermore, when checking if the input contains any of the special characters, simply use $scope.specialChar[i] without adding .value, as you are aiming to access a specific element in an array, not its value property.

inp.indexOf($scope.specialChar[i]) > -1)

Answer 4

To start off, it is important to wrap each character in the array with quotes when setting $scope.specialChar to ensure that they are read as strings:

$scope.specialchar = ['@', '#', '$', '%', '<', '^', '<'];

Furthermore, when checking if the input contains any of the special characters, simply use $scope.specialChar[i] without adding .value, as you are aiming to access a specific element in an array, not its value property.

inp.indexOf($scope.specialChar[i]) > -1)

Answer 5

Answer №3

Here is a more efficient directive to replace the code above:

angular.module('test')
  .directive('validChar', function() {
    return {
      require: '?ngModel',
      link: function(scope, element, attrs, ngModelCtrl) {
        if(!ngModelCtrl) {
          return;
        }

        ngModelCtrl.$parsers.push(function(val) {
          if (angular.isUndefined(val)) {
            val = '';
          }
          var clean = val.replace( /[a-zA-Z0-9]/g, '');
          if (val !== clean) {
            ngModelCtrl.$setViewValue(clean);
            ngModelCtrl.$render();
          }
          return clean;
        });

        element.bind('keypress', function(event) {
          if(event.keyCode === 32) {
            event.preventDefault();
          }
        });
      }
    };
  });

Answer 6

Here is a more efficient directive to replace the code above:

angular.module('test')
  .directive('validChar', function() {
    return {
      require: '?ngModel',
      link: function(scope, element, attrs, ngModelCtrl) {
        if(!ngModelCtrl) {
          return;
        }

        ngModelCtrl.$parsers.push(function(val) {
          if (angular.isUndefined(val)) {
            val = '';
          }
          var clean = val.replace( /[a-zA-Z0-9]/g, '');
          if (val !== clean) {
            ngModelCtrl.$setViewValue(clean);
            ngModelCtrl.$render();
          }
          return clean;
        });

        element.bind('keypress', function(event) {
          if(event.keyCode === 32) {
            event.preventDefault();
          }
        });
      }
    };
  });

Locate the unique symbol within an array

Answer №1

Filtering Disallowed Characters with Regular Expressions

Using JavaScript to Filter Disallowed Characters

Answer №2

Answer №3

Similar questions

Can an image map be utilized within an <a> element?

The functionality of the d3 Bar chart with a tool tip seems to be malfunctioning

Version 2.0.0 of ui-bootstrap causes popovers to malfunction when triggering expressions are used

Expanding Java Classes and Replacing Methods with Multiple Parameters in ES4X/Graal

Spin and flip user-submitted images with the power of HTML5 canvas!

Vue-router: the browser tries to open a <router-link> element as if it were a local file

Steps to make a unique custom tooltip without using jQuery by utilizing the title attribute

Which specific element should the userEvent.type(...) function target in order to work effectively with MUI's DesktopDatePicker TextField component?

How can I pass a value from JavaScript back to the .blade file in Laravel using DataTables?

Even though I have successfully compiled on Heroku, I am still encountering the dreaded Application Error

Stopping Form Submission with MUI TextField

What is the best way to convert a circular JSON object to a string

What is the method for populating a dropdown using ajax in the Jade template engine?

How come my JavaScript regular expression doesn't function properly when applied to elements in an array?

The JavaScript Autocomplete feature fails to clear suggestions when there is no user input detected

Prevent users from inserting images from their desktop into the HTML by disabling

Is it preferred to utilize v-show in combination with v-for?

Require the field if the country selected is the United States

Is there a way to prevent redirection to the homepage after submitting a login form?

The list item click event is not triggered when new list items are added