Tips for determining if an array has many occurrences of a string made up of separate whitespace values

Question

Tips for determining if an array has many occurrences of a string made up of separate whitespace values

Working with an Angular application that adds 'ng-star-inserted' to each node element. My task is to determine if the target element's class exists within an array.

https://i.sstatic.net/v8G97k6o.png

var footerElementClassList = [
      'footer-links__link',
      'social__link-icon',
      'bottom__link',
    ];

const filtered = footerElementClassList.includes('bottom__link ng-star-inserted');
console.log(filtered);

Attempted the following options without success

Option 1

var footerElementClassList = [
      'footer-links__link',
      'social__link-icon',
      'bottom__link',
    ];
var mySet = new Set(footerElementClassList);
var hasB = mySet.has('footer-links__link ng-star-inserted');
console.log(hasB); //false

Option 2

var footerElementClassList = [
      'footer-links__link',
      'social__link-icon',
      'bottom__link',
    ];

function hasMatch(value) {
return value = 'bottom__link ng-star-inserted';
}
const filtered = footerElementClassList.filter(hasMatch);
console.log(filtered); //false

Option 3

var footerElementClassList = [
      'footer-links__link',
      'social__link-icon',
      'bottom__link',
    ];
console.log(footerElementClassList?.contains('footer-links__link ng-star-inserted'));

Option 4

var footerElementClassList = [
      'footer-links__link',
      'social__link-icon',
      'bottom__link',
    ];
const filtered = footerElementClassList.includes('bottom__link ng-star-inserted');
console.log(filtered);

javascript arrays string algorithm search

Answer 1

Answer №1

When dealing with data-formats, there are two key types that are commonly used:

Array-based list of class-names
Search query provided as a string of space-separated class-names

Due to the different formats, comparison approaches must be tailored accordingly. One approach involves comparing an array of string-based name values to a string of space-separated name-values, leading to mainly two possible methods:

Split the string of class-names and iterate through the resulting array to see if the class-list array includes every split class-name. This method has a quadratic complexity due to the nested includes within every.
```
function hasEveryClassName(list, search) {
  return search
    .trim()
    .split(/\s+/)
    .every(value => list.includes(value));
}
```
Create a RegExp from the split and sorted string of class-names which is then tested against the sorted and joined string version of the provided array of class-names. This approach involves sorting both participants and creating a valid regex on the fly.
```
function hasEveryClassName(list, search) {
  return RegExp([
    '\\b',
    search
      .trim()
      .split(/\s+/)
      .sort()
      .join('\\b.*?\\b'),
    '\\b',
  ].join('')).test(list.sort().join(' '));
}
```

Here is an example of the code in action:

const classList = [
  'footer-links__link',
  'social__link-icon',
  'bottom__link',
];
const classNames = 'bottom__link ng-star-inserted';

// Sample implementation of the methods

.as-console-wrapper { min-height: 100%!important; top: 0; }

Edit: In response to the OP's query about a simpler solution...

Is there any way much more simpler to achieve the solution?

Indeed, while the existing every/includes based solution is straightforward, replacing the array/list of class-names with a Set-based representation can offer better performance.

The original solution using every/includes can be modified as follows:

function hasEveryClassName(list, search) {
  const lookup = new Set(list);

  return search
    .trim()
    .split(/\s+/)
    .every(value => lookup.has(value));
}

Switching from an array to a set structure reduces the time complexity of the solution from quadratic to linear.

Here's an example of the updated code:

const classNameLookup = new Set([
  'footer-links__link',
  'social__link-icon',
  'bottom__link',
]);
const classNames = 'bottom__link ng-star-inserted';

function hasEveryClassName(lookup, search) {
  return search
    .trim()
    .split(/\s+/)
    .every(value => lookup.has(value));
}

.as-console-wrapper { min-height: 100%!important; top: 0; }

Answer 2

When dealing with data-formats, there are two key types that are commonly used:

Array-based list of class-names
Search query provided as a string of space-separated class-names

Due to the different formats, comparison approaches must be tailored accordingly. One approach involves comparing an array of string-based name values to a string of space-separated name-values, leading to mainly two possible methods:

Split the string of class-names and iterate through the resulting array to see if the class-list array includes every split class-name. This method has a quadratic complexity due to the nested includes within every.
```
function hasEveryClassName(list, search) {
  return search
    .trim()
    .split(/\s+/)
    .every(value => list.includes(value));
}
```
Create a RegExp from the split and sorted string of class-names which is then tested against the sorted and joined string version of the provided array of class-names. This approach involves sorting both participants and creating a valid regex on the fly.
```
function hasEveryClassName(list, search) {
  return RegExp([
    '\\b',
    search
      .trim()
      .split(/\s+/)
      .sort()
      .join('\\b.*?\\b'),
    '\\b',
  ].join('')).test(list.sort().join(' '));
}
```

Here is an example of the code in action:

const classList = [
  'footer-links__link',
  'social__link-icon',
  'bottom__link',
];
const classNames = 'bottom__link ng-star-inserted';

// Sample implementation of the methods

.as-console-wrapper { min-height: 100%!important; top: 0; }

Edit: In response to the OP's query about a simpler solution...

Is there any way much more simpler to achieve the solution?

Indeed, while the existing every/includes based solution is straightforward, replacing the array/list of class-names with a Set-based representation can offer better performance.

The original solution using every/includes can be modified as follows:

function hasEveryClassName(list, search) {
  const lookup = new Set(list);

  return search
    .trim()
    .split(/\s+/)
    .every(value => lookup.has(value));
}

Switching from an array to a set structure reduces the time complexity of the solution from quadratic to linear.

Here's an example of the updated code:

const classNameLookup = new Set([
  'footer-links__link',
  'social__link-icon',
  'bottom__link',
]);
const classNames = 'bottom__link ng-star-inserted';

function hasEveryClassName(lookup, search) {
  return search
    .trim()
    .split(/\s+/)
    .every(value => lookup.has(value));
}

.as-console-wrapper { min-height: 100%!important; top: 0; }

Answer 3

Answer №2

When providing classes as a single string separated by a space, the first step is to split them. This particular code snippet checks for the presence of all classes provided.

var footerElementClassList = [
      'footer-links__link',
      'social__link-icon',
      'bottom__link',
    ];

function containesAll(classString, classList){
  const classes = classString.split(' ');
 
  for(cls of classes)
  {
    if(!classList.includes(cls))
    {
      return false;
    }
  }
  return true;
}

console.log(`containesAll('bottom__link ng-star-inserted', footerElementClassList): ${containesAll('bottom__link ng-star-inserted', footerElementClassList)}`) // false
console.log(`containesAll('bottom__link social__link-icon', footerElementClassList): ${containesAll('bottom__link social__link-icon', footerElementClassList)}`) // true

Answer 4

When providing classes as a single string separated by a space, the first step is to split them. This particular code snippet checks for the presence of all classes provided.

var footerElementClassList = [
      'footer-links__link',
      'social__link-icon',
      'bottom__link',
    ];

function containesAll(classString, classList){
  const classes = classString.split(' ');
 
  for(cls of classes)
  {
    if(!classList.includes(cls))
    {
      return false;
    }
  }
  return true;
}

console.log(`containesAll('bottom__link ng-star-inserted', footerElementClassList): ${containesAll('bottom__link ng-star-inserted', footerElementClassList)}`) // false
console.log(`containesAll('bottom__link social__link-icon', footerElementClassList): ${containesAll('bottom__link social__link-icon', footerElementClassList)}`) // true

Tips for determining if an array has many occurrences of a string made up of separate whitespace values

Answer №1

Answer №2

Similar questions

Exploring the Power of Laravel 5.5 and Vue.js 2.x for Efficient API Calls

What is the best way to turn off the legends in chart.js?

Issue with Materialize Sidenav: Not functional on iOS devices including iPhones, functions correctly on all other devices

Rendering data from an API using v-if

What is the best way to locate an item reference for a specific DOM element?

Prevent the selection of rows and only enable the option to select checkboxes in PrimeNG's Multiselect feature

The $scope variable does not sync with the express API

Trigger a page refresh when you revisit it

Error: Invariant violation - App component did not return anything in the render method

Looping through multi-dimensional JSON objects with jQuery

How can we avoid excessive re-rendering of a child component in React when making changes to the parent's state?

Incorporate the jquery lazy load plugin alongside ZURB foundation data-interchange for optimal performance

Finding differences between two 24-hour format times using moment.js

Shopify module is throwing an error stating that React is not defined

Is it possible to use JavaScript to click on a particular point or element within a canvas?

Calculate the total price using jQuery

Using ReactJS and JavaScript to transform an array into a fresh array

Using jQuery AJAX, the value of a server-side control (textbox) can be easily set

Error: The validation of a JSON request failed as schema.validate is not a recognized function

Is there a way to upload a kml file to Google Maps using my website or by using JavaScript commands?