Using Regular Expressions to Filter Arrays of Objects in Angular Versions 5 through 9

Question

Using Regular Expressions to Filter Arrays of Objects in Angular Versions 5 through 9

How do I use RegExp to filter objects, including title, email, and name?

Title and name must contain only alphabetic characters. The email must be valid.

RegExp Patterns:

Email = /[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}/

Title & Name = /^[A-Za-z]+$/

If any email is invalid, store it in a separate variable and store the other objects in a different variable.

In JSON, if the first object's email is invalid, it should be stored in a separate variable.

items = [
{
    title: "This is a title", 
    email: "test@test.com",
    status: "confirmed"
},
{
    title: "Another title", 
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0774686a626869624774686a62736f6e6e69605964686a">[email protected]</a>",
    status: "pending"
},    
{
    title: "Just some text", 
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa979fba83958fd49995d48f91">[email protected]</a>",
    status: "pending"
}
]

javascript angular typescript

Answer 1

Answer №1

Can you please give this strategy a try?

var items = [
{
    title: "This is title", 
    email: "testtest.com",
    status: "confirmed"
},
{
    title: "This another one", 
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71021e1c141e1f1431021e1c140519181f165f121e1c">[email protected]</a>",
    status: "pending"
},
{    
    title: "Just a random string", 
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8de0e8cdf4e2f8a3eee2a3f8e6">[email protected]</a>",
    status: "pending"
}    
]

var filtered_not_matching = items.filter(s => !/[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}/.test(s.email))

console.log(filtered_not_matching)

The .test() method checks for a pattern match between a regular expression and a string.

I recommend looking into the below article on regex matching in JavaScript as it covers various APIs related to regex matching:

Answer 2

Can you please give this strategy a try?

var items = [
{
    title: "This is title", 
    email: "testtest.com",
    status: "confirmed"
},
{
    title: "This another one", 
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71021e1c141e1f1431021e1c140519181f165f121e1c">[email protected]</a>",
    status: "pending"
},
{    
    title: "Just a random string", 
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8de0e8cdf4e2f8a3eee2a3f8e6">[email protected]</a>",
    status: "pending"
}    
]

var filtered_not_matching = items.filter(s => !/[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}/.test(s.email))

console.log(filtered_not_matching)

The .test() method checks for a pattern match between a regular expression and a string.

I recommend looking into the below article on regex matching in JavaScript as it covers various APIs related to regex matching:

Answer 3

Answer №2

If you're looking to refine your email filtering process by applying a regex rule to eliminate invalid emails, you can utilize the Array.filter() method on the items array. This method will help you weed out any objects whose email does not comply with the specified regex pattern. You have the flexibility to use various matching techniques such as text or match for your regex evaluations.

Here's a practical example of how this can be implemented:

const items = [{
    title: "This is title",
    email: "testtest.com",
    status: "confirmed"
  },
  {
    title: "This another one",
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9aab6b4bcb6b7bc99aab6b4bcadb1b0b7bef7bab6b4">[email protected]</a>",
    status: "pending"
  },
  {
    title: "Just a random string",
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab7bf9aa3b5aff4b9b5f4afb1">[email protected]</a>",
    status: "pending"
  }
];

const emailRegex = new RegExp(/[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}/)
const titleRegex = new RegExp('/^[A-Za-z]+$/');

const res = items.filter(({
  title,
  email
}) => !email.match(emailRegex));
console.log(res)

const res2 = items.filter(({
  title,
  email
}) => !emailRegex.text(email));
console.log(res2)

Answer 4

If you're looking to refine your email filtering process by applying a regex rule to eliminate invalid emails, you can utilize the Array.filter() method on the items array. This method will help you weed out any objects whose email does not comply with the specified regex pattern. You have the flexibility to use various matching techniques such as text or match for your regex evaluations.

Here's a practical example of how this can be implemented:

const items = [{
    title: "This is title",
    email: "testtest.com",
    status: "confirmed"
  },
  {
    title: "This another one",
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9aab6b4bcb6b7bc99aab6b4bcadb1b0b7bef7bab6b4">[email protected]</a>",
    status: "pending"
  },
  {
    title: "Just a random string",
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab7bf9aa3b5aff4b9b5f4afb1">[email protected]</a>",
    status: "pending"
  }
];

const emailRegex = new RegExp(/[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}/)
const titleRegex = new RegExp('/^[A-Za-z]+$/');

const res = items.filter(({
  title,
  email
}) => !email.match(emailRegex));
console.log(res)

const res2 = items.filter(({
  title,
  email
}) => !emailRegex.text(email));
console.log(res2)

Using Regular Expressions to Filter Arrays of Objects in Angular Versions 5 through 9

Answer №1

Answer №2

Similar questions

Action creator incomplete when route changes

What steps can I take to achieve complete code coverage in my unit testing for this component and also ensure that the 'else' part is being

Subclass callback with parameters

Inquiring about building a comprehensive AJAX website: SEO, Google index, design templates

What is the best way to implement a dynamic dropdown menu using react-bootstrap?

Having trouble incorporating symbols with functionalities using HTML, CSS, and JS

What exactly is the data type of setInterval in TypeScript?

Is it Beneficial to Combine jQuery with TypeScript in Angular 7?

Navigating through Vue Router with Dynamic Imports and Guards

A new issue arises after merging in Google Datastore, as an unexpected property is

Using async/await in combination with Vuex and Feathers

jQuery template does not respond to input text when a click event is enabled on an iPhone device

When Custom Route Provider is not a valid function

Add HTML code into a contenteditable element and then include additional text following the inserted HTML

Exploring jQuery Mobile | Moving Seamlessly between Pages

Accessing the login page will not display the header, breadcrumb, or

Angular Forms, mark a form as invalid if a p-select element retains its original value

I am encountering an error when trying to fetch a JSON response from a PHP script, even though I am able

Tips for creating a vue-cli application that can be customized post-build:

The autosearch feature seems to be malfunctioning