Форум

torrius · #1 (**permalink**) 07.05.2015, 21:12

Всем гениям привет!

С дурости озадачился тут таким вопросом.

Как преобразовать HTML код в теле документа (BODY) примерно в такой вид, вычистив все, кроме тегов, их id и их class:

<div id="wrapper" class="site">
	<div id="header">
		<h1 class="title"></h1>
		<a class="logo"><img class="logo"/></a>
		<ul id="nav">
			<li></li>
			<li></li>
		</ul>
	</div>
и так далее....
</div>

Поможите?

рони · #2 (**permalink**) 07.05.2015, 21:59

torrius,
так вам структура нужна или атрибуты убрать?

torrius · #3 (**permalink**) 07.05.2015, 22:34

Нужно удалить весь текст и комментарии. Удалить из тегов лишние атрибуты.
Оставить теги и атрибуты (если имеются) ID и CLASS. Оставить табуляцию и переносы строк.
То, что должно остаться, на примере выше.
Вот ведь как!

рони · #4 (**permalink**) 07.05.2015, 22:40

torrius,
собрали все элементы - если тип 1 проверили атрибуты лишнее удалили если тип 3 убрали текст оставили табуляцию, как то так выглядит корм для вашего сферического коня.

torrius · #5 (**permalink**) 07.05.2015, 22:52

Уж два дня бьюсь. И регулярками пытался, и циклами. И функциями зацикленными на самих себя. В итоге перезациклился сам.
Вроде просто, а как-то мудрено получается.
Суть в том, что изучаю вордпресовские темы. Фаербагом инспектировать как то нудно. Хочется почистить шаблоничик от хлама, распечатать, и спокойненько разбирать его, делая пометки.

Пробовал в двух направлениях.
Через getElementsByTagName('*'), через цикл проверяя кто по соседству а кто родитель.
И через element.children.
Вобщем опух я совсем от безысходности

рони · #6 (**permalink**) 08.05.2015, 01:08

torrius,
как то так

результат внизу страницы

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
  <title></title>
<script language="JavaScript" type="text/javascript">
var domNormalize = function(c) {
    c = c.cloneNode(true);
    (function f(a) {
        a = a.childNodes;
        for (var b = a.length - 1; 0 <= b; b--) {
            a[b].children && 0 == a[b].children.length && (a[b].innerHTML = "");
            if (a[b].hasChildNodes()) {
                for (var c = a[b].attributes, e = c.length - 1, d; d = c[e]; e--) "id" != d.name && "class" != d.name && a[b].removeAttribute(d.name);
                f(a[b])
            }
            3 == a[b].nodeType && (a[b].data = a[b].data.replace(/\S|\n{2,}/g, ""))
        }
    })(c);
    return c
};
window.onload=function(){

var c = domNormalize(document.body);
var textarea = document.createElement('textarea');
    textarea.value = c.innerHTML;
    textarea.cols = 80;
    textarea.rows = 40;
    document.body.appendChild(textarea)
    console.log(c)

};
</script>

</head>
<body>
<div class="page__tabs" style="margin-top: 50px">
        <ul class="just-tabs">
            <li class="nav__item">
                <a class="link link_tabs link_tabs_active" href="#">tab-1</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs link_tabs_disable" href="#">tab-2</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-3</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-4</a>
            </li>
        </ul>
        <div class="content_tabs">
            <div class="content__tab tab-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc ac velit pretium pretium. Nam facilisis lacinia est, non egestas massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla at neque fringilla, placerat lorem sit amet, iaculis augue. Phasellus non risus a ligula consequat elementum. Curabitur vel accumsan felis. Vivamus eget eros eget orci semper consectetur eleifend placerat ante. Curabitur vel facilisis felis, nec luctus diam. Cras feugiat orci ac neque blandit interdum. Etiam sodales leo ac felis egestas lacinia. Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
            <div class="content__tab tab-1">
                Sed at diam in mi maximus consequat sed a mauris. Etiam vitae consequat odio. Ut metus quam, euismod vel tempus vitae, maximus sed nunc. Vivamus tortor magna, varius id sagittis non, suscipit dapibus leo. Aliquam erat volutpat. Mauris in risus ante. Vivamus malesuada, nisi euismod suscipit venenatis, dolor mi sollicitudin odio, eget tincidunt mi leo sed risus. Donec pellentesque varius neque a bibendum. Curabitur malesuada ut augue sit amet feugiat
            </div>
            <div class="content__tab tab-2">
                Sed leo sem, tristique et ipsum quis, ultricies euismod ex. Maecenas feugiat condimentum condimentum. Ut cursus egestas metus, mattis interdum lorem tincidunt ut.
            </div>
            <div class="content__tab tab-3">
                Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
        </div>
    </div>
    <div class="page__tabs" style="margin-top: 50px">
        <ul class="just-tabs">
            <li class="nav__item">
                <a class="link link_tabs link_tabs_active" href="#">tab-1</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs link_tabs_disable" href="#">tab-2</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-3</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-4</a>
            </li>
        </ul>
        <div class="content_tabs">
            <div class="content__tab tab-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc ac velit pretium pretium. Nam facilisis lacinia est, non egestas massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla at neque fringilla, placerat lorem sit amet, iaculis augue. Phasellus non risus a ligula consequat elementum. Curabitur vel accumsan felis. Vivamus eget eros eget orci semper consectetur eleifend placerat ante. Curabitur vel facilisis felis, nec luctus diam. Cras feugiat orci ac neque blandit interdum. Etiam sodales leo ac felis egestas lacinia. Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
            <div class="content__tab tab-1">
                Sed at diam in mi maximus consequat sed a mauris. Etiam vitae consequat odio. Ut metus quam, euismod vel tempus vitae, maximus sed nunc. Vivamus tortor magna, varius id sagittis non, suscipit dapibus leo. Aliquam erat volutpat. Mauris in risus ante. Vivamus malesuada, nisi euismod suscipit venenatis, dolor mi sollicitudin odio, eget tincidunt mi leo sed risus. Donec pellentesque varius neque a bibendum. Curabitur malesuada ut augue sit amet feugiat
            </div>
            <div class="content__tab tab-2">
                Sed leo sem, tristique et ipsum quis, ultricies euismod ex. Maecenas feugiat condimentum condimentum. Ut cursus egestas metus, mattis interdum lorem tincidunt ut.
            </div>
            <div class="content__tab tab-3">
                Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
        </div>
    </div>
</body>
</html>

torrius · #7 (**permalink**) 08.05.2015, 09:13

РОНИ, ваш гениальный мозг - гордость человечества!
Я уже уснул, а вы тут такое произведение наваяли! Спасибо

Остаются комменты и "лишние" атрибуты, но это даже лучше.

Попробую разобрать и вникнуть в логику вашего чудо-кода.

c = c.cloneNode(true);
(function f(a) {
   /*код...*/
})(c);
return c

- Вот тут клонируется узел с потомками в переменную "с".
Потом "с" передается в функцию-замыкание, где там что-то с ней делается.
А как она от туда возвращается? разве код вне функции-замыкания видит что внутри нее?
И еще. Почему иногда пишется "(function(){}())", а иногда "(function(){})()" - в чем отличие?

JsConAp · #8 (**permalink**) 08.05.2015, 12:34

Сообщение от torrius

Остаются комменты и "лишние" атрибуты, но это даже лучше.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
window.onload = function(){
    function removeComment() {
        var str = document.body.innerHTML,
            reg = /<!--.*-->/gim;
        if (~str.search(reg)) {
            str = str.replace(reg, '');
        }
        document.body.innerHTML = str;
    }

    function removeTextNodes(Node) {
        for (var i = 0; i < Node.childNodes.length; i++) {
            var childNode = Node.childNodes[i];
            if (childNode.nodeType == 3) {
                Node.removeChild(Node.childNodes[i]);
                i--;
            }
            if (childNode.nodeType == 1) removeTextNodes(childNode);
        }
    }

    function cleaningAttrs() {
        var elems = document.querySelectorAll("*");
        for (var i = 0; i < elems.length; i++) {
            remove(elems[i]);
        }

        function remove(elem) {
            var attrs = elem.attributes;
            for (var i = 0; i < attrs.length; i++) {
                var attr = attrs[i].name;
                if (attr !== "id" && attr !== "class") {
                    elem.removeAttribute(attr);
                }
                continue;
            }
        }
    }

    function domNormalize() {
        removeComment();
        removeTextNodes(document.body);
        cleaningAttrs();
    }

    domNormalize();
}
</script>
</head>
<body>
<!--comment1-->
<div class="page__tabs" id="main" style="margin-top: 50px">
        <ul class="just-tabs">
            <li class="nav__item">
                <a class="link link_tabs link_tabs_active" href="#">tab-1</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs link_tabs_disable" href="#">tab-2</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-3</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-4</a>
            </li>
        </ul>
        <div class="content_tabs">
            <div class="content__tab tab-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc ac velit pretium pretium. Nam facilisis lacinia est, non egestas massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla at neque fringilla, placerat lorem sit amet, iaculis augue. Phasellus non risus a ligula consequat elementum. Curabitur vel accumsan felis. Vivamus eget eros eget orci semper consectetur eleifend placerat ante. Curabitur vel facilisis felis, nec luctus diam. Cras feugiat orci ac neque blandit interdum. Etiam sodales leo ac felis egestas lacinia. Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
            <div class="content__tab tab-1">
                Sed at diam in mi maximus consequat sed a mauris. Etiam vitae consequat odio. Ut metus quam, euismod vel tempus vitae, maximus sed nunc. Vivamus tortor magna, varius id sagittis non, suscipit dapibus leo. Aliquam erat volutpat. Mauris in risus ante. Vivamus malesuada, nisi euismod suscipit venenatis, dolor mi sollicitudin odio, eget tincidunt mi leo sed risus. Donec pellentesque varius neque a bibendum. Curabitur malesuada ut augue sit amet feugiat
            </div>
            <div class="content__tab tab-2">
                Sed leo sem, tristique et ipsum quis, ultricies euismod ex. Maecenas feugiat condimentum condimentum. Ut cursus egestas metus, mattis interdum lorem tincidunt ut.
            </div>
            <div class="content__tab tab-3">
                Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
        </div>
    </div>
    <div class="page__tabs" style="margin-top: 50px">
        <ul class="just-tabs">
            <li class="nav__item">
                <a class="link link_tabs link_tabs_active" href="#">tab-1</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs link_tabs_disable" href="#">tab-2</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-3</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-4</a>
            </li>
        </ul>
        <div class="content_tabs">
            <div class="content__tab tab-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc ac velit pretium pretium. Nam facilisis lacinia est, non egestas massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla at neque fringilla, placerat lorem sit amet, iaculis augue. Phasellus non risus a ligula consequat elementum. Curabitur vel accumsan felis. Vivamus eget eros eget orci semper consectetur eleifend placerat ante. Curabitur vel facilisis felis, nec luctus diam. Cras feugiat orci ac neque blandit interdum. Etiam sodales leo ac felis egestas lacinia. Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
            <div class="content__tab tab-1">
                Sed at diam in mi maximus consequat sed a mauris. Etiam vitae consequat odio. Ut metus quam, euismod vel tempus vitae, maximus sed nunc. Vivamus tortor magna, varius id sagittis non, suscipit dapibus leo. Aliquam erat volutpat. Mauris in risus ante. Vivamus malesuada, nisi euismod suscipit venenatis, dolor mi sollicitudin odio, eget tincidunt mi leo sed risus. Donec pellentesque varius neque a bibendum. Curabitur malesuada ut augue sit amet feugiat
            </div>
            <div class="content__tab tab-2">
                Sed leo sem, tristique et ipsum quis, ultricies euismod ex. Maecenas feugiat condimentum condimentum. Ut cursus egestas metus, mattis interdum lorem tincidunt ut.
            </div>
            <div class="content__tab tab-3">
                Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
        </div>
    </div>
<!--comment2-->
<!--comment3-->
<!--comment4-->
<!--comment5-->
</body>
</html>

рони · #9 (**permalink**) 08.05.2015, 13:05

Сообщение от torrius

А как она от туда возвращается?

она не возвращается -- функция просто изменяет содержимое с -- примерно так:
a = 5
function -> a = 10
return a

да и нет там никакого замыкания просто обьявление функции и её запуск соедининены

Сообщение от torrius

Почему иногда пишется "(function(){}())", а иногда "(function(){})()" - в чем отличие?

практически одинаково

Сообщение от torrius

Остаются комменты и "лишние" атрибуты, но это даже лучше

исправленный вариант - проверьте

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
  <title></title>
<script language="JavaScript" type="text/javascript">
var domNormalize = function(c) {
    c = c.cloneNode(!0);
    (function f(a) {
        a = a.childNodes;
        for (var b = a.length - 1; 0 <= b; b--)
            if (1 == a[b].nodeType) {
                for (var c = a[b].attributes, e = c.length - 1, d; d = c[e]; e--) "id" != d.name && "class" != d.name && a[b].removeAttribute(d.name);
                a[b].children.length ? f(a[b]) : a[b].innerHTML = ""
            } else 3 == a[b].nodeType ? a[b].data = a[b].data.replace(/\S|\n{2,}/g, "") : a[b].parentNode.removeChild(a[b])
    })(c);
    return c
};
window.onload=function(){

var c = domNormalize(document.body);
var textarea = document.createElement('textarea');
    textarea.value = c.innerHTML;
    textarea.cols = 80;
    textarea.rows = 40;
    document.body.appendChild(textarea)
    console.log(c)

};
</script>

</head>
<body>
 <!-- wwwww -->
<div class="page__tabs" style="margin-top: 50px">
        <ul class="just-tabs">
            <li class="nav__item">
                <a class="link link_tabs link_tabs_active" href="#">tab-1</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs link_tabs_disable" href="#">tab-2</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-3</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-4</a>
            </li>
        </ul>
        <div class="content_tabs">
            <div class="content__tab tab-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc ac velit pretium pretium. Nam facilisis lacinia est, non egestas massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla at neque fringilla, placerat lorem sit amet, iaculis augue. Phasellus non risus a ligula consequat elementum. Curabitur vel accumsan felis. Vivamus eget eros eget orci semper consectetur eleifend placerat ante. Curabitur vel facilisis felis, nec luctus diam. Cras feugiat orci ac neque blandit interdum. Etiam sodales leo ac felis egestas lacinia. Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
            <div class="content__tab tab-1">
                Sed at diam in mi maximus consequat sed a mauris. Etiam vitae consequat odio. Ut metus quam, euismod vel tempus vitae, maximus sed nunc. Vivamus tortor magna, varius id sagittis non, suscipit dapibus leo. Aliquam erat volutpat. Mauris in risus ante. Vivamus malesuada, nisi euismod suscipit venenatis, dolor mi sollicitudin odio, eget tincidunt mi leo sed risus. Donec pellentesque varius neque a bibendum. Curabitur malesuada ut augue sit amet feugiat
            </div>
            <div class="content__tab tab-2">
                Sed leo sem, tristique et ipsum quis, ultricies euismod ex. Maecenas feugiat condimentum condimentum. Ut cursus egestas metus, mattis interdum lorem tincidunt ut.
            </div>
            <div class="content__tab tab-3">
                Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
        </div>
    </div>
    <div class="page__tabs" style="margin-top: 50px">
        <ul class="just-tabs">
            <li class="nav__item">
                <a class="link link_tabs link_tabs_active" href="#">tab-1</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs link_tabs_disable" href="#">tab-2</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-3</a>
            </li>
            <li class="nav__item">
                <a class="link link_tabs" href="#">tab-4</a>
            </li>
        </ul>
        <div class="content_tabs">
            <div class="content__tab tab-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc ac velit pretium pretium. Nam facilisis lacinia est, non egestas massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla at neque fringilla, placerat lorem sit amet, iaculis augue. Phasellus non risus a ligula consequat elementum. Curabitur vel accumsan felis. Vivamus eget eros eget orci semper consectetur eleifend placerat ante. Curabitur vel facilisis felis, nec luctus diam. Cras feugiat orci ac neque blandit interdum. Etiam sodales leo ac felis egestas lacinia. Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
            <div class="content__tab tab-1">
                Sed at diam in mi maximus consequat sed a mauris. Etiam vitae consequat odio. Ut metus quam, euismod vel tempus vitae, maximus sed nunc. Vivamus tortor magna, varius id sagittis non, suscipit dapibus leo. Aliquam erat volutpat. Mauris in risus ante. Vivamus malesuada, nisi euismod suscipit venenatis, dolor mi sollicitudin odio, eget tincidunt mi leo sed risus. Donec pellentesque varius neque a bibendum. Curabitur malesuada ut augue sit amet feugiat
            </div>
            <div class="content__tab tab-2">
                Sed leo sem, tristique et ipsum quis, ultricies euismod ex. Maecenas feugiat condimentum condimentum. Ut cursus egestas metus, mattis interdum lorem tincidunt ut.
            </div>
            <div class="content__tab tab-3">
                Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
            </div>
        </div>
    </div>
</body>
</html>

torrius · #10 (**permalink**) 08.05.2015, 14:32

Пока ваш код не осилил разобрать, уж слишком "почерк" не знакомый.
Но в библиотечку добавлю.
А пока вот свою "версию" придумал.
Интересно мнение специалиста

onload = function(){ document.body.innerHTML = viewHtml(document.body) }
	
function viewHtml(obj){
	var res = "<table style='border-collapse: collapse; margin: 0 auto; width: 100%;'>";
	f(obj)();
	return res + "</table>";
	function f(elm){
		elm.t = elm.parentNode.t ? (elm.parentNode.t + " &mdash; ") : ' &mdash; ';
		var i, chi = elm.children, len = elm.children.length;
		return function(){
			var tg,id,cl,st;
			for(i = 0; i < len; i++) {
				tg = chi[i].tagName.toLowerCase();
				id = (id = chi[i].getAttribute('id')) ? "#" + id : '';
				cl = (cl = chi[i].getAttribute('class')) ? '.' + cl.replace(/\s/g, '.') : '';
				st = " style='font-family: courier new; height: 1em; border-bottom: 1px solid #f0f0f0;'";
				res	+= "<tr><td" + st + ">" + elm.t + tg + id + cl + "</td></tr>";
				f(chi[i])();
			}
		}
		delete elm.t;
	}
}

Форум

Справочник

Discord чат

Курсы javascript