如何基于JavaScript整理HTML代码

2024-02-24

我正在编写一个可以整理 HTML 代码的 JavaScript 函数(目前不需要整理 JavaScript 和 CSS 代码)。

这是我的代码。并检查一下http://jsfiddle.net/2q26K/ http://jsfiddle.net/2q26K/

function tidyHtml(html) {
    var html = html.trim().replace(/>[^<]+</gm, function ($1) {
        return '>' + $1.substr(1, $1.length - 2).trim() + '<';
    }).replace(/>\s+</gm, '><');
    var containerElement = document.createElement('div');
    containerElement.innerHTML = html;
    var result = containerElement.innerHTML;
    var findLevel = function (child, parent) {
        var level = 0;
        while (child != parent) {
            child = child.parentNode;
            level++;
        }
        return level;
    }
    Array.prototype.slice.call(containerElement.getElementsByTagName('*')).forEach(function (element) {
        var tabs = new Array(findLevel(element, containerElement) - 1).join('   '),
            tabs2 = (element.parentNode.lastChild == element) ? ('\n' + tabs.substring(0, tabs.length - 1)) : '',
            containerElement = document.createElement('div');
        containerElement.appendChild(element.cloneNode(true));
        result = result.replace(containerElement.innerHTML, '\n' + tabs + containerElement.innerHTML + tabs2);
    });
    return result;
}

在提供的示例中,它运行得很好。

但是,有时 HTML 代码是这样的:http://jsfiddle.net/2q26K/1/ http://jsfiddle.net/2q26K/1/

它拒绝改变

<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC</div>

To

<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC
</div>

我无法解决它。它太复杂了。有没有更简单的方法可以做同样的事情?

我该如何改进我的代码?我可以借鉴什么例子?


如果速度不是问题,您可以运行 jQuery 解析器(或者Cheerio https://cheerio.js.org/ with Node.js https://en.wikipedia.org/wiki/Node.js) 在生成的 HTML 字符串上,使用 $(String).html() 方法正如这里所解释的 https://stackoverflow.com/questions/3614212/jquery-get-html-of-a-whole-element.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何基于JavaScript整理HTML代码 的相关文章

随机推荐