Как форматировать/убирать/украшать в JavaScript

Как я могу форматировать/убирать/украшать HTML в JavaScript? Я попытался выполнить поиск/замену для угловых скобок (<, >) и соответственно отступать. Но, конечно, этого не требуется когда JS или CSS и т.д. внутри HTML.

Причина, по которой я хочу это сделать, - это создать редактор контента (CMS), который имеет как WYSIWYG, так и исходные коды. Проблема в том, что код, написанный редактором WYSIWYG, обычно является одной строкой. Поэтому мне нужен JavaScript, который мог бы форматировать это в более удобочитаемую форму по требованию.

Вот что я до сих пор:

function getIndent(level) {
    var result = '',
        i = level * 4;
    if (level < 0) {
        throw "Level is below 0";
    }
    while (i--) {
        result += ' ';
    }
    return result;
}

function style_html(html) {
    html = html.trim();
    var result = '',
        indentLevel = 0,
        tokens = html.split(/</);
    for (var i = 0, l = tokens.length; i < l; i++) {
        var parts = tokens[i].split(/>/);
        if (parts.length === 2) {
            if (tokens[i][0] === '/') {
                indentLevel--;
            }
            result += getIndent(indentLevel);
            if (tokens[i][0] !== '/') {
                indentLevel++;
            }

            if (i > 0) {
                result += '<';
            }

            result += parts[0].trim() + ">\n";
            if (parts[1].trim() !== '') {
                result += getIndent(indentLevel) + parts[1].trim().replace(/\s+/g, ' ') + "\n";
            }

            if (parts[0].match(/^(img|hr|br)/)) {
                indentLevel--;
            }
        } else {
            result += getIndent(indentLevel) + parts[0] + "\n";
        }
    }
    return result;
}

Ответы

Ответ 1

@lovasoa Как форматировать/убирать/украшать в JavaScript - отличное решение.
rock-solid, намного лучше, чем vkBeautify или даже CodeMirror (трудно использовать AMD) и очень просто

<script src='http://lovasoa.github.io/tidy-html5/tidy.js'></script>
<script>
  options = {
  "indent":"auto",
  "indent-spaces":2,
  "wrap":80,
  "markup":true,
  "output-xml":false,
  "numeric-entities":true,
  "quote-marks":true,
  "quote-nbsp":false,
  "show-body-only":true,
  "quote-ampersand":false,
  "break-before-br":true,
  "uppercase-tags":false,
  "uppercase-attributes":false,
  "drop-font-tags":true,
  "tidy-mark":false
}

var html = document.querySelector("body").outerHTML;
var result = tidy_html5(html, options);
console.log(result);
</script>

Ответ 2

Вы также можете использовать инструмент командной строки, если у вас есть node.js install

запустить npm install -g uglify-js для установки uglifyjs по всему миру, здесь для документации.

Затем вы можете uglify index.min.js -b -o index.js

Ответ 3

Написание html на одной строке будет быстрее загружаться в браузер, поэтому я не уверен, что хочу отформатировать его. Возможно, вариант для форматированной версии или оптимизированной версии.

Что касается вопроса... вы можете сделать ajax после стольких действий и отправить код на сервер, который будет отформатирован и показан в другом окне на экране. В основном это была бы версия в реальном времени этого сайта, http://infohound.net/tidy/

Ответ 4

Создатель jQuery Джон Ресиг написал быстрый и легкий HTML-парсер в javascript. Если вы ищете решение, которое вы можете добавить непосредственно на свою CMS, тогда вы можете написать простой украшатель, используя этот анализатор в качестве базы. Все, что вам нужно сделать, - это перезапустить элементы, добавляющие пробелы и разрывы строк по вашему усмотрению, используя встроенный api:

HTMLParser(htmlString, {
  start: function(tag, attrs, unary) {},
  end: function(tag) {},
  chars: function(text) {},
  comment: function(text) {}
});

Дополнительным преимуществом этого подхода является то, что вы можете использовать один и тот же HTMLParser для чтения HTML обратно в свой WYSIWYG или иным образом взаимодействовать с вашим HTML-деревом пользователя. HTMLParser также поставляется заранее с помощью метода HTMLtoDOM.

Ответ 5

Я считаю, что оба механизма отображения кода отладки кода chrome и firebug написаны в JS. Это, вероятно, более тяжелая работа, чем вы действительно хотите испортить, хотя.

Ответ 6

Ошибка форматирования Resig с очень простым тестовым примером:

в http://ejohn.org/apps/htmlparser/

в поле ввода введите:

<script src="/files/htmlparser.js"></script>
<script>
var x = 1;
</script>

выводит поле:

<script src="/files/htmlparser.js"></script>
<script></script>
var x = 1;