What is the best way to retrieve all classes that have a hyphen/dash in them from a DOM element and then store them in an array using JavaScript?

Question

What is the best way to retrieve all classes that have a hyphen/dash in them from a DOM element and then store them in an array using JavaScript?

How can I retrieve all classes that contain a hyphen/dash applied to any DOM element and store them in an array using JavaScript?

My current approach:

const getClasses = [];
const classesContain = [];

document.querySelectorAll('*').forEach(element => {
    const classNames = element.className.split(' ');
    getClasses.push(classNames);
});

getClasses.forEach(classArray => {
    if (classArray.includes('-')) {
        classesContain.push(classArray);
    }
});

javascript arrays classname selectors-api

Answer 1

Answer №1

It seems like you're on the right track with your solution, but there are a few tweaks needed to make it work properly. Instead of pushing an array into the getClasses function, you should be passing individual classes. Remember that neither strings nor arrays have a standard contains method; you may want to use includes instead.

let classesWithDashes = new Set();
document.querySelectorAll('*').forEach(element => { 
  for (const cls of element.className.split(' ').filter(name => name.includes("-"))) {
      classesWithDashes.add(cls);
  }
});
// Now, `classesWithDashes` contains all the class names with dashes
// If you need them in an array format:
classesWithDashes = [...classesWithDashes];

Here's a demonstration:

let classesWithDashes = new Set();
document.querySelectorAll('*').forEach(element => { 
  for (const cls of element.className.split(' ').filter(name => name.includes("-"))) {
      classesWithDashes.add(cls);
  }
});
// `classesWithDashes` now holds the classes with dashes
// Convert to an array if needed:
classesWithDashes = [...classesWithDashes];
console.log(classesWithDashes);

<div class="foo foo-bar"></div>
<div class="another-one"></div>
<div class="no-dash-class"></div>

(I've always wondered why Set doesn't include something like an addAll method or allow multiple values to be passed to add, similar to push...)

Answer 2

It seems like you're on the right track with your solution, but there are a few tweaks needed to make it work properly. Instead of pushing an array into the getClasses function, you should be passing individual classes. Remember that neither strings nor arrays have a standard contains method; you may want to use includes instead.

let classesWithDashes = new Set();
document.querySelectorAll('*').forEach(element => { 
  for (const cls of element.className.split(' ').filter(name => name.includes("-"))) {
      classesWithDashes.add(cls);
  }
});
// Now, `classesWithDashes` contains all the class names with dashes
// If you need them in an array format:
classesWithDashes = [...classesWithDashes];

Here's a demonstration:

let classesWithDashes = new Set();
document.querySelectorAll('*').forEach(element => { 
  for (const cls of element.className.split(' ').filter(name => name.includes("-"))) {
      classesWithDashes.add(cls);
  }
});
// `classesWithDashes` now holds the classes with dashes
// Convert to an array if needed:
classesWithDashes = [...classesWithDashes];
console.log(classesWithDashes);

<div class="foo foo-bar"></div>
<div class="another-one"></div>
<div class="no-dash-class"></div>

(I've always wondered why Set doesn't include something like an addAll method or allow multiple values to be passed to add, similar to push...)

Answer 3

Answer №2

Retrieve all elements with a class containing a hyphen by using document.querySelectorAll() along with an attribute selector. Transform the results into an array using Array.from(). Proceed to iterate through the elements using Array.flatMap(), extract the classlist, convert it to an array, and filter out classes that lack a hyphen. Utilize a Set to eliminate duplicate items and then spread them back into an array.

const result = [...new Set( // employing a Set for unique item collection
  Array.from(document.querySelectorAll('[class*="-"]')) // choosing elements with hyphen-containing classes
  
  .flatMap(el => Array.from(el.classList).filter(c => c.includes('-'))) // generating an array of classes with hyphens
)]

console.log(result)

<div class="something a-b something-else x-y"></div>
<div class="something"></div>
<div class="a-b c-d"></div>

Answer 4

Retrieve all elements with a class containing a hyphen by using document.querySelectorAll() along with an attribute selector. Transform the results into an array using Array.from(). Proceed to iterate through the elements using Array.flatMap(), extract the classlist, convert it to an array, and filter out classes that lack a hyphen. Utilize a Set to eliminate duplicate items and then spread them back into an array.

const result = [...new Set( // employing a Set for unique item collection
  Array.from(document.querySelectorAll('[class*="-"]')) // choosing elements with hyphen-containing classes
  
  .flatMap(el => Array.from(el.classList).filter(c => c.includes('-'))) // generating an array of classes with hyphens
)]

console.log(result)

<div class="something a-b something-else x-y"></div>
<div class="something"></div>
<div class="a-b c-d"></div>

Answer 5

Answer №3

It's important to note that by pushing an array of classes into your getClasses array, you are actually creating a 2-dimensional array.

Furthermore, you can streamline the process by extracting and filtering classes containing dashes in one single step, instead of going through the list twice.

var classesContain = [];

document.querySelectorAll('*').forEach(x => {
  var y = (x.className || '').split(/\s+/g); // using a regex to handle multiple spaces
  y.forEach(className => {
    if (className.includes('-'))
      classesContain.push(className);
  });
});

console.log('Final class list: ', classesContain);

<div class="foo-bar bar-baz foo">
  <div class="foo-baz">
    <span class="single">Example markup</span>
  </div>
</div>

Answer 6

It's important to note that by pushing an array of classes into your getClasses array, you are actually creating a 2-dimensional array.

Furthermore, you can streamline the process by extracting and filtering classes containing dashes in one single step, instead of going through the list twice.

var classesContain = [];

document.querySelectorAll('*').forEach(x => {
  var y = (x.className || '').split(/\s+/g); // using a regex to handle multiple spaces
  y.forEach(className => {
    if (className.includes('-'))
      classesContain.push(className);
  });
});

console.log('Final class list: ', classesContain);

<div class="foo-bar bar-baz foo">
  <div class="foo-baz">
    <span class="single">Example markup</span>
  </div>
</div>

What is the best way to retrieve all classes that have a hyphen/dash in them from a DOM element and then store them in an array using JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to make multiple requests in node.js using npm and then wait for all of them to finish

Spin the content of a div after a button click with the power of jquery and css

Having difficulty updating the login button name with ng-show function

Troubleshooting the challenge of saving multiple records using ajax in Django

Attempting to save an image captured in a Vue form and then transmit it to the Laravel backend

Toggling the JQuery toggleClass() function to switch a class on and off (or delete it afterwards

sophisticated HTML navigation bar

React: I am looking to incorporate two API calls within a single function

What is the best way to locate all complete words within a string, up to 65 characters in length?

Transitioning from the login screen to the main page in Ionic with the help of Angular

Fade in background color with jquery when scrolling

How can I display actual images received as escaped string literals from ExpressJS?

Can you explain how the functionality of setState operates within React in this specific situation?

What is the best way to automatically show the last two digits of a phone number in a second text field?

Exporting variables in node.js allows you to share data between different

NodeJs: Transforming strings into UUID v4 efficiently

Utilizing a function as an argument in another function (with specified parameters)

When using Vue.js, styling SVGs with CSS proves difficult as it applies inline styles in the DOM rather than using class names

Writing a function to determine if an HTML element is present

Extracting data from an array using Angular