前端展示html字符串,【Web前端问题】HTML字符串排版

我现在有HTML代码的字符串，想要对字符串进行排版，有没有什么可用的方法？

需要一款js插件，或者方法，能在项目里面转换用的。

比如原字符串是：

This is a p

This is another p

添加空格和换行，变成新的字符串:

This is a p

This is another p

回答：

第一种方案想用正则做答没成功，没有成功。

整理了下思路，已经完美解决(自认为完美)。

function codeFormat(code, indent, tmpIndent){

var indent = indent || ' ';

var tmpIndent = tmpIndent || '\n';

var preg = /]*)>([\s\S]*?)/ig;

return code.replace(preg, function($0, $1, $2, $3){

return tmpIndent + ''

+ codeFormat($3, indent, tmpIndent + indent)

+ ( $3.trim().substr(0,1) == '

+ '' + $1 + '>';

});

}

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

--------

----

*/

以下是循环的老答案：

/*

感觉没什么难度，一个循环

遇见 >后跟

遇见 < 缩进

遇见 取消缩进

*/

function codeFormat(code, indent){

var indent = indent || " "; //缩进字符

var tmpIndent = ""; //保存代码字符串

var result = "", key = "", keyNext = "";

for( var i = 0 ; i < code.length ; i++ ){

key = code[i];

keyNext = i < code.length-1 ? code[i+1] : "";

if(key == "

if( keyNext == "/" ){

tmpIndent = tmpIndent.substr(indent.length);

}

if( result[result.length-1] == "\n" ){

result += tmpIndent;

}

if( keyNext != "/" ){

tmpIndent += indent;

}

}

result += key;

if(key == ">" && keyNext == "

result += "\n";

}

}

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

*/

回答：

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

@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('\n');

}

回答：

回答：

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

安装完成后，按 shift-ctrl-x 打开插件列表，搜索 Beautify 并安装，即可实现 HTML 代码美化。

相应设置参考这里：

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

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

3.(重新制作一个 HTML Parser 并不困难，参考我的专栏

http://ewind.us/2016/toy-html…