Javascript Question posted in
A very good W3school tutorial can be found here.

Check if an array includes / contains values with extra in JavaScript?

Using an Angular application which inserts ‘ng-star-inserted‘ to every node element. I need to check if the target element class exists inside array

enter image description here

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

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

Tried below options but no luck

enter image description here

Tags:

2

Answers


  1. 0

    As you privide the classes as a single string, separated by a space you first need to split them. This code does check for all classes.

    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
    Login or Signup to reply.
  2. 0

    There are two data-formats …

    • the array-based list of class names
    • the search query provided as string of space separated class names.

    Since one has to use comparison approaches which fit the different formats, an array of string-based name values versus a string of space-separated name-values, one can come up with mainly two approaches …

    • split the string of class-names and iterate its resulting array in order to look whether the class-list array includes every of the split class-names which makes the approaches complexity quadratic (includes nested inside 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 then gets tested against the sorted and joined string-version of the provided array of class-names. The complexity comes with the approach itself which needs to sort both participants and has to create a valid/working regex like e.g. /bbottom__linkb.*?bng-star-insertedb/ on the fly …

      function hasEveryClassName(list, search) {
  return RegExp([
    '\b',
    search
      .trim()
      .split(/s+/)
      .sort()
      .join('\b.*?\b'),
    '\b',
  ].join('')).test(list.sort().join(' '));
}

    … working example code …

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


function hasEveryClassName_v1(list, search) {
  return search
    .trim()
    .split(/s+/)
    .every(value => list.includes(value))
}
console.log('n... nested `every`/`includes` approach ...nn');

console.log(
  `hasEveryClassName_v1(n  ${ JSON.stringify(classList) },n  ${ JSON.stringify(classNames) },n) ...`,
  hasEveryClassName_v1(classList, classNames),
);
classList.push('ng-star-inserted');

console.log(
  `hasEveryClassName_v1(n  ${ JSON.stringify(classList) },n  ${ JSON.stringify(classNames) },n) ...`,
  hasEveryClassName_v1(classList, classNames),
);
classList.pop();


function hasEveryClassName_v2(list, search) {
  return RegExp([
    '\b',
    search
      .trim()
      .split(/s+/)
      .sort()
      .join('\b.*?\b'),
    '\b',
  ].join('')).test(list.sort().join(' '));
}
console.log('n... concatenated sorted name string and regex test based approach ...nn');

console.log(
  `hasEveryClassName_v2(n  ${ JSON.stringify(classList) },n  ${ JSON.stringify(classNames) },n) ...`,
  hasEveryClassName_v2(classList, classNames),
);
classList.unshift('ng-star-inserted');

console.log(
  `hasEveryClassName_v2(n  ${ JSON.stringify(classList) },n  ${ JSON.stringify(classNames) },n) ...`,
  hasEveryClassName_v2(classList, classNames),
);
    .as-console-wrapper { min-height: 100%!important; top: 0; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search