Как получить названия всех форм на странице в виде массива?

Question

[romaro]

На странице есть формы с css-классами, названия которых соответствуют регулярному выражению js-[a-z-]*-form.

Например:

js-signup-form
js-create-product-form

Мне нужно создать функцию, которая, при загрузке страницы, будет возвращать массив названий этих форм, т.е. извлечет строку между "js-" и "-form": ['signup', 'create-product'].

Как это лучше реализовать? Смотреть в сторону работы с HTML-коллекцией?

Array.from(document.getElementsByTagName('p')).map((item) => item.innerHTML.replace('...', '...'))

Если да, то как лучше удалить все лишние данные из кода для каждой формы?

Answer 1

[0xD34F]

const result = Array.prototype.flatMap.call(
  document.forms,
  function(form) {
    return form.className.match(this) ?? [];
  },
  /(?<=(^| )js-)[a-z-]*(?=-form( |$))/g
);

или

const result = [];
const reg = /^js-([a-z-]*)-form$/;

for (const form of document.querySelectorAll('form')) {
  for (const cls of form.classList) {
    const name = reg.exec(cls)?.[1];
    if (name != null) {
      result.push(name);
    }
  }
}