如何在 JavaScript 中格式化/整理/美化

IT技术 javascript jquery html
2021-02-08 07:04:26

如何在 JavaScript 中格式化/整理/美化 HTML?我尝试搜索/替换尖括号 ( <, >) 并相应地缩进。但是当然它没有考虑 HTML 中的 JS 或 CSS 等。

我想这样做的原因是我制作了一个内容编辑器(CMS),它具有所见即所得和源代码视图。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;
}
6个回答

我使用这种方法来格式化 HTML。简单,但可以完成工作:

function format(html) {
    var tab = '\t';
    var result = '';
    var indent= '';

    html.split(/>\s*</).forEach(function(element) {
        if (element.match( /^\/\w/ )) {
            indent = indent.substring(tab.length);
        }

        result += indent + '<' + element + '>\r\n';

        if (element.match( /^<?\w[^>]*[^\/]$/ ) && !element.startsWith("input")  ) { 
            indent += tab;              
        }
    });

    return result.substring(1, result.length-3);
}
很好的解决方案。虽然它不提供缩进,也不格式化 CSS,但它是一个很好的快速和肮脏的,而且非常简短。
2021-03-15 07:04:26
这很简单但很好。但是当标记为 be, hr 时计算错误
2021-03-16 07:04:26
@johnywhy 似乎可以很好地处理缩进。
2021-04-03 07:04:26
我建议用 4 个空格改变 \t
2021-04-09 07:04:26
这对 HTML 非常有用,非常感谢!有没有类似的 CSS 快速解决方案?
2021-04-13 07:04:26

@lovasoa如何在 JavaScript 中格式化/整理/美化是一个很好的解决方案。
坚如磐石,比 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>
2021-03-20 07:04:26

我需要类似的东西,这是我的解决方案,灵感来自 michal.jakubeczy 提供的方法。为了保留<pre>标签内的格式,它有点复杂希望这会帮助某人。

function formatHTML(html) {
    var indent = '\n';
    var tab = '\t';
    var i = 0;
    var pre = [];

    html = html
        .replace(new RegExp('<pre>((.|\\t|\\n|\\r)+)?</pre>'), function (x) {
            pre.push({ indent: '', tag: x });
            return '<--TEMPPRE' + i++ + '/-->'
        })
        .replace(new RegExp('<[^<>]+>[^<]?', 'g'), function (x) {
            var ret;
            var tag = /<\/?([^\s/>]+)/.exec(x)[1];
            var p = new RegExp('<--TEMPPRE(\\d+)/-->').exec(x);

            if (p) 
                pre[p[1]].indent = indent;

            if (['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr'].indexOf(tag) >= 0) // self closing tag
                ret = indent + x;
            else {
                if (x.indexOf('</') < 0) { //open tag
                    if (x.charAt(x.length - 1) !== '>')
                        ret = indent + x.substr(0, x.length - 1) + indent + tab + x.substr(x.length - 1, x.length);
                    else 
                        ret = indent + x;
                    !p && (indent += tab);
                }
                else {//close tag
                    indent = indent.substr(0, indent.length - 1);
                    if (x.charAt(x.length - 1) !== '>')
                        ret =  indent + x.substr(0, x.length - 1) + indent + x.substr(x.length - 1, x.length);
                    else
                        ret = indent + x;
                }
            }
            return ret;
        });

    for (i = pre.length; i--;) {
        html = html.replace('<--TEMPPRE' + i + '/-->', pre[i].tag.replace('<pre>', '<pre>\n').replace('</pre>', pre[i].indent + '</pre>'));
    }

    return html.charAt(0) === '\n' ? html.substr(1, html.length - 1) : html;
}

function unformatHTML(html) {
    var i = 0;
    var pre = [];

    html = html.replace(new RegExp('<pre>((.|\\t|\\n|\\r)+)?</pre>'), function (x) {
        pre.push(x);
        return '<--TEMPPRE' + i++ + '/-->'
    }).replace(/\n/g, '').replace(/\t/g, '');

    for (i = pre.length; i--;) {
        html = html.replace('<--TEMPPRE' + i + '/-->', pre[i]);
    }

    html = html.replace(new RegExp('<pre>\\n'), '<pre>').replace(new RegExp('\\n\\t*</pre>'), '</pre>');
    return html;
}
它有效,但会添加一些空行并将所有内容中断到新行
2021-04-01 07:04:26
这个更好;但是我必须在格式化之前取消格式化 HTML 以逃避乘法换行错误。
2021-04-02 07:04:26
在此解决方案中添加了 @pendingfox unformatHTML。
2021-04-11 07:04:26

如果您安装了 node.js,也可以使用命令行工具

运行npm install -g uglify-js以全局安装 uglifyjs,请在此处查看文档。

那么你也能 uglify index.min.js -b -o index.js

我的问题是因为您的解决方案是用于开发的,我认为浏览器内部没有运行时。
2021-04-04 07:04:26

我发现js-beautify远远优于迄今为止发布的任何解决方案。

脚本添加到您的 lib 文件夹中:

像往常一样带入内部标题:

<script src="libs/beautify.js"></script>

将代码定位在页面上的任何位置(例如precode标记),并js_beautify根据需要使用该函数进行格式化:

$(".my_class").text(js_beautify($(".my_class").text()))

这将根据需要进行格式化。存储库上可用的各种配置选项。