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

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

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

  • Неожиданный доступ к переменной «event» в браузерах?
  • Mongoexport с использованием ограничений $ и $ lt в диапазоне дат
  • Загрузить файл pdf ajax html
  • Закрытие JavaScript и область переменных
  • Проверка правильности URL-адресов
  • Лучший календарный календарь 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; } 

  • Javascript: Как сгенерировать форматированный легко читаемый JSON прямо из объекта?
  • Как я могу украсить JSON программно?
  • 6 Solutions collect form web for “Как форматировать / убирать / украшать в JavaScript”

    @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> , <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> 

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

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

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

    Создатель 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.

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

    Форматировщик 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; 

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

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

    JavaScript делает сайт умным, красочным и простым использованием.