84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
我现在有HTML代码的字符串，想要对字符串进行排版，有没有什么可用的方法？
HTML
需要一款js插件，或者方法，能在项目里面转换用的。
比如原字符串是：
This is a pThis is another p
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\S]*?)<\/>/ig; return code.replace(preg, function(/* 感觉没什么难度，一个循环 遇见 >后跟<，换行 遇见 < 缩进 遇见 " && keyNext == "<" ){ result += "\n"; } } return result; } codeFormat("This is a pThis is another p"); /* This is a p This is another p */ codeFormat(' This is a pThis 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 pThis is anothers pThis is a pThis is another p"); /* This is a p This is anothers p This is a p This is another p */ codeFormat(' This is a pThis is another p', '----'); /* ---- -------- ---- ---- -------- ------------This is a p ------------This is another p -------- ---- */
/* 感觉没什么难度，一个循环 遇见 >后跟<，换行 遇见 < 缩进 遇见 " && keyNext == "<" ){ result += "\n"; } } return result; } codeFormat("This is a pThis is another p"); /* This is a p This is another p */ codeFormat(' This is a pThis is another p', ' '); /* This is a p This is another p */
This is anothers 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'); }
http://tool.oschina.net/codef... 在线的。其他的编辑器里面有beautify
对开发工具而言，你可以尝试 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...
第一种方案想用正则做答没成功，没有成功。
整理了下思路，已经完美解决（自认为完美）。
以下是循环的老答案：
rrreee为什么我这个问题一直被踩？还是一个不错的问题的嘛。。。。
@mqycn , @zhenguoli
这是朋友@candy写的一个方案：
http://tool.oschina.net/codef... 在线的。其他的编辑器里面有beautify
对开发工具而言，你可以尝试 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...