javascript - HTML字符串排版
问题描述
我现在有HTML代码的字符串，想要对字符串进行排版，有没有什么可用的方法？
需要一款js插件，或者方法，能在项目里面转换用的。
比如原字符串是：
<p><p>This is a p</p><p>This is another p</p></p>
添加空格和换行，变成新的字符串:
<p> <p>This is a p</p> <p>This is another p</p></p>
问题解答
回答1：第一种方案想用正则做答没成功，没有成功。整理了下思路，已经完美解决（自认为完美）。
function codeFormat(code, indent, tmpIndent){ var indent = indent || ’ ’; var tmpIndent = tmpIndent || ’n’; var preg = /<(S*)([^>]*)>([sS]*?)</1>/ig; return code.replace(preg, function($0, $1, $2, $3){return tmpIndent + ’<’ + $1 + $2 + ’>’ + codeFormat($3, indent, tmpIndent + indent) + ( $3.trim().substr(0,1) == ’<’ ? tmpIndent : ’’) + ’</’ + $1 + ’>’; });}codeFormat('<p><p>This is a p</p><p>This is anothers p</p></p><p><p>This is a p</p><p>This is another p</p></p>');/*<p> <p>This is a p</p> <p>This is anothers p</p></p><p> <p>This is a p</p> <p>This is another p</p></p>*/codeFormat(’<html><head><title></title></head><body class='haha'><p style='background:#C00;'><p>This is a p</p><p>This is another p</p></p></body></html>’, ’----’);/*<html>----<head>--------<title></title>----</head>----<body class='haha'>--------<p style='background:#C00;'>------------<p>This is a p</p>------------<p>This is another p</p>--------</p>----</body></html>*/
以下是循环的老答案：
/* 感觉没什么难度，一个循环 遇见 >后跟<，换行 遇见 < 缩进 遇见 </ 取消缩进*/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('<p><p>This is a p</p><p>This is another p</p></p>');/*<p> <p>This is a p</p> <p>This is another p</p></p>*/codeFormat(’<html><head><title></title></head><body class='haha'><p style='background:#C00;'><p>This is a p</p><p>This is another p</p></p></body></html>’, ’ ’);/*<html> <head><title></title> </head> <body class='haha'><p style='background:#C00;'> <p>This is a p</p> <p>This is another p</p></p> </body></html>*/回答2：
为什么我这个问题一直被踩？还是一个不错的问题的嘛。。。。@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’);}回答3：
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...
相关文章：
1. javascript - h5上的手机号默认没有识别2. javascript - 谁能帮我创建一个webpack2+vue2+vuex+less+dev-server的空项目3. vue.js - weex scroller搭配refresh在android平台上拉会触发refresh4. python - 网站显示的图片与爬虫获取到的图片不同，应该如何确定问题？5. 极光推送 - Android app消息推送 百度 极光 个推 信鸽哪个好一些？6. css3 - Firefox 字号相对IE、Chrome更大，如何在CSS中统一？7. css - div display: inline-block; 置中？8. html5 - 如何让H5页面在手机浏览器里和微信全屏显示9. javascript - 在html中写了个<video>视频，浏览器却是一片空白为什么呢？360浏览器？10. javascript - ajax中的 textStatus 报错为 parsererror？
网公网安备