Use ES6 to filter data disregarding the text case

When I want to filter my data based on the title value, here's how I do it:

data.filter(x => x.title.includes(term))

For example, with data like:

Sample one
Sample Two
Bla two

The filtered result would be:

Bla two

If I'm filtering by two.

However, what I actually need is the filtered result to include:

Sample Two
Bla two

Answer №1

To perform a case-insensitive search, you can utilize a regular expression:

// It is important to ensure that `term` does not contain any special characters
data.filter(x => new RegExp(term, 'i').test(x.title));

Alternatively, a more straightforward and secure method would be to convert all strings to lowercase before comparison:

data.filter(x => x.title.toLowerCase().includes(term.toLowerCase()))

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the malfunction of my two-way data binding in Ionic?

While working on a project in Ionic, I ran into issues with my data-binding. I'm struggling to understand why this is happening. To troubleshoot, I created a new Ionic project using "ionic start myApp sidemenu" to test the data binding. Even in the n ...

Accessing confidential information from a server-side application like Node.js (express) or Asp.net-core to be displayed on the client-side using Angular

My belief is that I will receive an HTML form through a POST method which will contain a token, and I need to catch it on the server side. app.post('/callback', (req, res)=> { var token = req.body.access_token res.cookie('acc ...

Using NodeJS to convert a Base64 string into a JPEG image with the help of either NodeJS or

I have successfully stored a JPEG image in my MySQL database using the longblob format. Now, when I retrieve the longblob data, I am only getting a base64 string. How can I convert this base64 string back to a readable JPEG image using MySQL or Node.js? B ...

JavaScript - A simple way to retrieve the dimensions of an image consistently

I'm currently working on a piece of Jquery code that is designed to display an image fitting within the screen's dimensions. These images are generated dynamically as needed. However, I am facing an issue where the height and width of the image a ...

Using Django template variables within JavaScript linked to the template

How can I access Django template variables like {{ STATIC_URL }} in the referenced file.js that is included using <script src="/static/file.js" /> in my template? Looking for the best approach to provide access to template variables in file.js. Any ...

Experiencing AJAX errors 403 and 404 despite successful implementation in other instances

I am facing a perplexing issue with my code that is causing a 403 error when attempting to delete a row. The strange thing is, the code works perfectly on another website I created. The concept is quite simple - attaching an event listener to a button trig ...

When using Angular with multiple instances of the same directive, the scope is shared and not isolated

Can anyone help me with an issue I'm having while creating multiple directives with isolated scope? Whenever I make a change in the 1st directive, it also affects all other directives. It's causing some unexpected behavior. For those who want to ...

The jQuery html() method and its use of ' ' characters

My issue involves a string that has unicode encoded nonbreaking space. I need to store this string in a hidden HTML element so that another function can access the value. The problem arises when using the html() function, as it seems to alter the content ...

What is the most effective method for parsing a JSON document?

There are several methods to read JSON files in Node.js, such as: Utilizing the FS Library Synchronous: var fs = require('fs'); var obj = JSON.parse(fs.readFileSync('file', 'utf8')); Asynchronous: var fs = require(' ...

The URL for the dynamic import in Workbox is loading incorrectly

For my laravel/vuejs application, I am utilizing workbox and babel dynamic imports. Additionally, I am making use of the laravel-mix and laravel-mix-workbox plugin to compile and generate service worker via generateSW(). The assets load correctly on the r ...

Showing key-value pairs from an array of objects using Angular TypeScript

Within my angular application, I am fetching a dynamic list of objects from an API. A sample of the data structure is as follows: [ { "_id": "some id", "DATE": "2021/01/08", "COUNT&qu ...

The PHP page is not receiving any data when using the $.POST() method in jQuery

Even after clicking the submit button, my POST variable on the PHP page remains empty. I am trying to send data from a Javascript page to a PHP page. In my Javascript code: $('#btnSubmit').click(function(){ if(quantityArray[j] == undefined) ...

The fixed-top navigation bar in Bootstrap obscures the links within the #content

As a student studying software development, I am currently working on a web development project for my class. Utilizing Bootstrap, I have implemented a navbar-fixed-top and structured the body as a table-striped table with each row containing a <a href= ...

The steps to close my PWA after sharing data using Web Share Target

After sharing a picture from Google Photos to my PWA (installed through Chrome on Android and utilizing the code mentioned here: https://web.dev/web-share-target/), I am directed to my PWA page. How can I automatically return to Google Photos? If it ma ...

Display a PDF document from a separate domain within an HTML webpage

I am attempting to display a PDF on my website from a different domain. This is the HTML code I am using: <div id="pdfContainer"> <embed id="pdf" type="application/pdf" /> </div> And here is the JavaScript: $.get("http://otherDoma ...

Approach the data from various angles, customize the rendering of container components using parameters

Is it considered an antipattern to have a container component return different representation elements based on a condition variable passed to it? For example, I have routes for both the SummaryPageComponent and CustomersPageComponent. The Summary page ha ...

What is the best way to imitate the action of clicking a hyperlink?

Let's imagine that we have two links, a1 and a2, where a2 is currently hidden from view. Is there a way in jQuery to make it so that when a user clicks on link a1, it triggers the same action as clicking on link a2? ...

Implement the charset meta tag using JavaScript

Currently troubleshooting a bug that seems to be related to the browser defaulting to the user's native charset (ISO-8859-1) instead of UTF-8. Here is the link for more information: https://github.com/OscarGodson/EpicEditor/issues/184#issuecomment-880 ...

How can jQuery be used to style a single selected option with a unique color?

I have a dropdown menu with a default placeholder ("ex. Crawler Excavator") displayed in lightgray. I want only this placeholder to be in lightgray when selected, while all other labels should be black. Currently, I am able to color the selected item light ...

Why is the image auto-swapping script failing to display images frequently?

I have a script that is currently running to rotate between two different logos on my webpage. What I am attempting to achieve is for the page to load and then seamlessly transition from one image to the other without any blank space. Below is the code I ...