Как получить чистый html код?

Question

[Виталий Балаян]

Я получаю

<div draggable="true" ondragstart="drag(event)" id="item_col-2" class="layout_el col-2 gap">
    <div class="g-grid" ondrop="drop(event, this)" ondragover="allowDrop(event)">123</div>
    <div class="g-grid" ondrop="drop(event, this)" ondragover="allowDrop(event)">321</div>
</div>

Требуется получить

<div class="col-2 gap">
    <div class="g-grid">123</div>
    <div class="g-grid">321</div>
</div>

UPD

Есть некий конструктор страницы. Вставляешь туда разные блоки редактируешь и прочее, и при получении разметки страницы через .html(), вся эта требуха остается, хотелось чтоб он на каком-то этапе удалялась, и можно было в последствии сохранить "чистый код" в базу данных

Comments

[Rustam Bainazarov]

Сочувствую вам.


Ну а может вы всё-таки дополните вопрос дополнительной информацией? Откуда берётся код выше, что, как, зачем и почему?..

Откуда мы должны знать, откуда все эти атрибуты для скриптов?

[Stalker_RED]

ну удали лишние атрибуты.
или о чем ты спрашиваешь?

[Виталий Балаян]

Stalker_RED, Рустам Байназаров, Есть некий конструктор страницы. Вставляешь туда разные блоки редактируешь и прочее, и при получении разметки страницы через .html(), вся эта требуха остается, хотелось чтоб он на каком-то этапе удалялась, и можно было в последствии сохранить "чистый код" в базу данных

[Stalker_RED]

Виталий Балаян, ну удали.

Answer 1

[Денис]

Вариант в песочнице

var str = `<div draggable="true" onclick="return false;"  id="item_col-2" class="layout_el wtf  col-2 gap">
    <div class="g-grid" ondrop="drop(event, this)" ondragover="allowDrop(event)">123</div>
    <div class="g-grid" ondrop="drop(event, this)" ondragover="allowDrop(event)">321</div>
</div>`;

// Допустимые классы
const allowClasses = new Set(['col-2', 'gap', 'g-grid']);

const wrapper = document.createElement('div');
wrapper.innerHTML = str;
wrapper.querySelectorAll('*').forEach(el => {
  [...el.attributes].forEach(attr => {
    if (attr.name !== 'class') {
      el.removeAttribute(attr.name);
    } else {
      [...new Set(el.classList)].filter(x => !allowClasses.has(x)).forEach(cls => {
        el.classList.remove(cls);
      });
    }
  });
});
console.log(wrapper.innerHTML);

Answer 2

[wqertAnna]

Мой вариант на основе регулярных выражений
https://codepen.io/anon/pen/orEzbE

const string = `<div draggable="true" ondragstart="drag(event)" id="item_col-2" class="layout_el col-2 gap">
    <div class="g-grid" ondrop="drop(event, this)" ondragover="allowDrop(event)">123</div>
    <div class="g-grid" ondrop="drop(event, this)" ondragover="allowDrop(event)">321</div>
</div>`;

const reg = /<\w+|class=".+?"|>|<\/\w+>|[^>]+?(?=<)|/igm;
const result = string.match(reg).join(" ").replace(/\s\s+/g, ' ');

console.log(result);

Просто поместите нужную вам строку в переменную string

Comments

[Сергей delphinpro]

Человек конструктором пользуется =) Какие ему регулярки ))

[Robur]

wqertAnna, вам вообще не следовало что-то реализовывать в вопросе на тостере - тут людям надо помогать что-то понять, а не делать так как им надо за них.

[wqertAnna]

Robur, написать решение или подсказку это на усмотрение отвечающего.