javascript - HTML字符串排版

Question

我现在有HTML代码的字符串，想要对字符串进行排版，有没有什么可用的方法？ 需要一款js插件，或者方法，能在项目里面转换用的。 比如原字符串是： {代码...} 添加空格和换行，变成新的字符串: {代码...}

世界只因有你 · Answer

第一种方案想用正则做答没成功，没有成功。
整理了下思路，已经完美解决（自认为完美）。

function codeFormat(code, indent, tmpIndent){
    var indent = indent || '  ';
    var tmpIndent = tmpIndent || '
';
    var preg = /<(\S*)([^>]*)>([\s\S]*?)/ig;
    return code.replace(preg, function(/*
    感觉没什么难度，一个循环
    遇见 >后跟<，换行
    遇见 < 缩进
    遇见 " && keyNext == "<" ){
            result += "
";
        }
    }
    return result;
}

codeFormat("
This is a p
This is another p
");
/*

  
This is a p
  This is another p

*/
codeFormat('
This is a p
This is another p
', '    ');
/*

    
        
        
    
    
        
            
This is a p
            This is another p
        
    

*/, , , ){
        return tmpIndent + '<' +  +  + '>'
            + codeFormat(, indent, tmpIndent + indent)
            + ( .trim().substr(0,1) == '<' ? tmpIndent : '') 
            + '';
    });
}
codeFormat("
This is a p
This is anothers p
This is a p
This is another p
");
/*

  
This is a p
  This is anothers p


  
This is a p
  This is another p

*/
codeFormat('
This is a p
This is another p
', '----');
/*

----
--------
----
----
--------
------------
This is a p
------------This is another p
--------
----

*/

以下是循环的老答案：

rrreee

怪我咯 · Answer

为什么我这个问题一直被踩？还是一个不错的问题的嘛。。。。
@mqycn , @zhenguoli

这是朋友@candy写的一个方案：

import _ from 'lodash';

const splitOnTags = str => str.split(/(]+>)/g).filter(line=>line.trim()!="");
const isTag = str => /<[^>!]+>/.test(str);
const isClosingTag = str => /]+>/.test(str);
const isSelfClosingTag = str => /<[^>]+/>/.test(str);
const isOpeningTag = str => isTag(str) && !isClosingTag(str) && !isSelfClosingTag(str);

export default (str, indent) => {
  let depth = 0;
  indent = indent || '    ';

  return splitOnTags(str).map(item=>{
    if(isClosingTag(item)) {
      depth--;
    }

    const line = _.repeat(indent, depth) + item;

    if(isOpeningTag(item)) {
      depth++;
    } 

    return line;
  }).join('
');
}

黄舟 · Answer

http://tool.oschina.net/codef... 在线的。其他的编辑器里面有beautify

伊谢尔伦 · Answer

对开发工具而言，你可以尝试 VSCode 编辑器。

https://code.visualstudio.com/

安装完成后，按 shift-ctrl-x 打开插件列表，搜索 Beautify 并安装，即可实现 HTML 代码美化。
相应设置参考这里：

https://marketplace.visualstu...

在代码中进行格式转换可以使用 HTML String Parser，例如

https://www.npmjs.com/package...

或者使用 cheerio 解析 DOM 文本后重新输出亦可。

3.（重新制作一个 HTML Parser 并不困难，参考我的专栏
http://ewind.us/2016/toy-html...

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程