Как сделать массив из текста (html) на javascipt?

Question

[v-orlov]

У меня есть строка:

'<div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div>'

Как это можно привести к виду?

arr = ['<div class="abc"></div>' , '<div class="abc"></div>' , ...]

и так далее, чтобы на этот объект действовали методы массива (slice например)?

P.S. гуглил

Comments

[ой всё]

Никита Полевой, я уже рассказывала, причем не один раз, даже рассказывала больше, чем могла

но вы сами понимаете, что те, кто живут в одной плоскости, не могут представить себе трехмерное пространство так же, как и мы все не можем представить себе четырехмерное

судя по тому какие "объекты" строят 90% "программистов" и сколько неэффективного кода они пишут да еще и доказывают, что им нужно именно тридцать экземпляров одного и того же кода с тридцатью наборами данных, быстрого понимания ожидать не приходится, но это как бы и не проблема, потому что с развитием автоматизации этот неэффективный слой будет просто смыт волной прогресса так же, как смывало все предыдущие

Answer 1

[Петр Мухуров]

const str = '<div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div>';

const result = str.split('</div>').reduce((prev, curr, index, arr) => { 
  if (index !== arr.length - 1) prev[index] = curr + '</div>'; 
  return prev; 
}, []);
// ["<div class="abc"></div>", "<div class="abc"></div>", "<div class="abc"></div>", "<div class="abc"></div>", "<div class="abc"></div>", "<div class="abc"></div>", "<div class="abc"></div>", "<div class="abc"></div>", "<div class="abc"></div>", "<div class="abc"></div>"]

Answer 2

[Антон Спирин]

простой вариант

const str = "<div class='abc'></div><div class='abc'></div>";
const array = $(str);

array.each((_, el) => console.log(el));

//  результат 
//  <div class="abc"></div>
//  <div class="abc"></div>

Стоит уточнить, что это не массив, а объект JQuery. Плюс такого решения в том, что теги могут быть абсолютно любые.

Answer 3

[0xD34F]

const div = document.createElement('div');
div.innerHTML = str;
const arr = Array.prototype.map.call(div.children, n => n.outerHTML);

или

const arr = Array.from(
  new DOMParser().parseFromString(str, 'text/html').body.children,
  n => n.outerHTML
);

или

const arr = [];
for (const n of document.createRange().createContextualFragment(str).children) {
  arr.push(n.outerHTML);
}

Answer 4

[Алексей]

var str = '<div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div>';
var regexp = /(<div class="abc"><\/div>)/g;
var matches_array = str.match(regexp);