javascript - HTML字符串排版
問(wèn)題描述
我現(xiàn)在有HTML代碼的字符串，想要對(duì)字符串進(jìn)行排版，有沒(méi)有什么可用的方法？
需要一款js插件，或者方法，能在項(xiàng)目里面轉(zhuǎn)換用的。
比如原字符串是：
<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>
問(wèn)題解答
回答1：第一種方案想用正則做答沒(méi)成功，沒(méi)有成功。整理了下思路，已經(jīng)完美解決（自認(rèn)為完美）。
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>*/
以下是循環(huán)的老答案：
/* 感覺(jué)沒(méi)什么難度，一個(gè)循環(huán) 遇見(jiàn) >后跟<，換行 遇見(jiàn) < 縮進(jìn) 遇見(jiàn) </ 取消縮進(jìn)*/function codeFormat(code, indent){ var indent = indent || ' '; //縮進(jìn)字符 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：
為什么我這個(gè)問(wèn)題一直被踩？還是一個(gè)不錯(cuò)的問(wèn)題的嘛。。。。@mqycn , @zhenguoli
這是朋友@candy寫的一個(gè)方案：
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
對(duì)開發(fā)工具而言，你可以嘗試 VSCode 編輯器。
https://code.visualstudio.com/
安裝完成后，按 shift-ctrl-x 打開插件列表，搜索 Beautify 并安裝，即可實(shí)現(xiàn) HTML 代碼美化。相應(yīng)設(shè)置參考這里：
https://marketplace.visualstu...
在代碼中進(jìn)行格式轉(zhuǎn)換可以使用 HTML String Parser，例如
https://www.npmjs.com/package...
或者使用 cheerio 解析 DOM 文本后重新輸出亦可。
3.（重新制作一個(gè) HTML Parser 并不困難，參考我的專欄http://ewind.us/2016/toy-html...
相關(guān)文章：
1. php - 第三方支付平臺(tái)在很短時(shí)間內(nèi)多次異步通知,訂單多次確認(rèn)收款2. html5 - h5寫的app用的webview，用手機(jī)瀏覽器打開不顯示？3. css3 - css before 中文亂碼？4. Mysql && Redis 并發(fā)問(wèn)題5. javascript - node服務(wù)端渲染的困惑6. javascript - 百度echarts series數(shù)據(jù)更新問(wèn)題7. javascript - webpack --hot 熱重載無(wú)效的問(wèn)題8. mysql新建字段時(shí) timestamp NOT NULL DEFAULT ’0000-00-00 00:00:00’ 報(bào)錯(cuò)9. mysql scripts提示 /usr/bin/perl: bad interpreter10. mysql - 一個(gè)表和多個(gè)表是多對(duì)多的關(guān)系，該怎么設(shè)計(jì)
網(wǎng)公網(wǎng)安備