Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.05.2015, 21:12
Интересующийся
Отправить личное сообщение для torrius Посмотреть профиль Найти все сообщения от torrius
 
Регистрация: 19.11.2014
Сообщений: 15

Как вывести HTML структуру страницы?
Всем гениям привет!

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

Как преобразовать 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

torrius,
так вам структура нужна или атрибуты убрать?
Ответить с цитированием
  #3 (permalink)  
Старый 07.05.2015, 22:34
Интересующийся
Отправить личное сообщение для torrius Посмотреть профиль Найти все сообщения от torrius
 
Регистрация: 19.11.2014
Сообщений: 15

Нужно удалить весь текст и комментарии. Удалить из тегов лишние атрибуты.
Оставить теги и атрибуты (если имеются) ID и CLASS. Оставить табуляцию и переносы строк.
То, что должно остаться, на примере выше.
Вот ведь как!
Ответить с цитированием
  #4 (permalink)  
Старый 07.05.2015, 22:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

torrius,
собрали все элементы - если тип 1 проверили атрибуты лишнее удалили если тип 3 убрали текст оставили табуляцию, как то так выглядит корм для вашего сферического коня.
Ответить с цитированием
  #5 (permalink)  
Старый 07.05.2015, 22:52
Интересующийся
Отправить личное сообщение для torrius Посмотреть профиль Найти все сообщения от torrius
 
Регистрация: 19.11.2014
Сообщений: 15

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

Пробовал в двух направлениях.
Через getElementsByTagName('*'), через цикл проверяя кто по соседству а кто родитель.
И через element.children.
Вобщем опух я совсем от безысходности
Ответить с цитированием
  #6 (permalink)  
Старый 08.05.2015, 01:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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>

Последний раз редактировалось рони, 08.05.2015 в 01:12.
Ответить с цитированием
  #7 (permalink)  
Старый 08.05.2015, 09:13
Интересующийся
Отправить личное сообщение для torrius Посмотреть профиль Найти все сообщения от torrius
 
Регистрация: 19.11.2014
Сообщений: 15

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

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

Попробую разобрать и вникнуть в логику вашего чудо-кода.
c = c.cloneNode(true);
(function f(a) {
   /*код...*/
})(c);
return c

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

Последний раз редактировалось torrius, 08.05.2015 в 09:16.
Ответить с цитированием
  #8 (permalink)  
Старый 08.05.2015, 12:34
Аватар для JsConAp
Интересующийся
Отправить личное сообщение для JsConAp Посмотреть профиль Найти все сообщения от JsConAp
 
Регистрация: 22.02.2015
Сообщений: 24

Сообщение от 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>

Последний раз редактировалось JsConAp, 08.05.2015 в 12:58.
Ответить с цитированием
  #9 (permalink)  
Старый 08.05.2015, 13:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от 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>
Ответить с цитированием
  #10 (permalink)  
Старый 08.05.2015, 14:32
Интересующийся
Отправить личное сообщение для torrius Посмотреть профиль Найти все сообщения от torrius
 
Регистрация: 19.11.2014
Сообщений: 15

Пока ваш код не осилил разобрать, уж слишком "почерк" не знакомый.
Но в библиотечку добавлю.
А пока вот свою "версию" придумал.
Интересно мнение специалиста
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;
	}
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как с помощью javascript взять данные из одного файла html и закинуть в другой? rusik Общие вопросы Javascript 10 08.08.2016 12:11
JS AJAX Как получить html страницы "глазами" другого пользователя kolyanok AJAX и COMET 11 18.05.2013 23:00
вывести html код страницы в div djonA Общие вопросы Javascript 3 13.05.2013 20:01
Как изменить HTML который пришел с серевера? wawandas Общие вопросы Javascript 4 24.03.2013 20:13
Как с помощью PHP сохранить какие-либо изменения в HTML документе? FirstFrost Работа 6 06.09.2010 16:16