如何使用jquery美化html标签
[英]How to beautify the html tags using jquery
问题描述
我需要对齐来自后端 php.How 的 html 标签，如何整齐地对齐并向用户显示 html 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.attach_btn{font-family: Helvetica,Arial,sans-serif; font-size: 16px; font-weight: 700; color: #fefefe; text-decoration: none; display: inline-block; padding: 8px 16px; border-radius: 3px; background: #243f89; border: none; border-color: #243f89;}p{margin:10px 0; padding:0;}table{border-collapse:collapse;}h1,h2,h3,h4,h5,h6{display:block; margin:0; padding:0;}img,a img{border:0; height:auto; outline:none; text-decoration:none;}body,#bodyTable,#bodyCell{height:100%; margin:0; padding:0; width:100%;}.mcnPreviewText{display:none !important;}#outlook a{padding:0;}img{-ms-interpolation-mode:bicubic;}table{mso-table-lspace:0pt; mso-table-rspace:0pt;}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Purple Admin</title>
<link rel="stylesheet" href="vendors/iconfonts/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="vendors/css/vendor.bundle.base.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/favicon.png"/>
</head>
<body>
<div class="container-scroller">
</body>
</html>
2 个解决方案
解决方案1
2 已采纳 2019-12-02 06:54:55
你可以使用 javascript Regex做这样的事情：
var htmlstr='<!DOCTYPE html><html lang="en"><head> <style type="text/css"> .attach_btn{font-family: Helvetica,Arial,sans-serif; font-size: 16px; font-weight: 700; color: #fefefe; text-decoration: none; display: inline-block; padding: 8px 16px; border-radius: 3px; background: #243f89; border: none; border-color: #243f89;}p{margin:10px 0; padding:0;}table{border-collapse:collapse;}h1,h2,h3,h4,h5,h6{display:block; margin:0; padding:0;}img,a img{border:0; height:auto; outline:none; text-decoration:none;}body,#bodyTable,#bodyCell{height:100%; margin:0; padding:0; width:100%;}.mcnPreviewText{display:none !important;}#outlook a{padding:0;}img{-ms-interpolation-mode:bicubic;}table{mso-table-lspace:0pt; mso-table-rspace:0pt;}<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Purple Admin</title> <link rel="stylesheet" href="vendors/iconfonts/mdi/css/materialdesignicons.min.css"> <link rel="stylesheet" href="vendors/css/vendor.bundle.base.css"> <link rel="stylesheet" href="css/style.css"> <link rel="shortcut icon" href="images/favicon.png"/></head><body> <div class="container-scroller"> </body></html>'; htmlstr = htmlstr.split(/\\>[ ]?\\</).join(">\\n<"); htmlstr = htmlstr.split(/([*]?\\{|\\}[*]?\\{|\\}[*]?)/).join("\\n"); htmlstr = htmlstr.split(/[*]?\\;/).join("\\;\\n "); document.body.innerText= htmlstr;
您可以使用此功能来美化您的 HTML 和 CSS，但不能保证对 JavaScript：
function beautifycode(htmlstr){ htmlstr = htmlstr.split(/\\>[ ]?\\</).join(">\\n<"); htmlstr = htmlstr.split(/([*]?\\{|\\}[*]?\\{|\\}[*]?)/).join("\\n"); htmlstr = htmlstr.split(/[*]?\\;/).join("\\;\\n "); return htmlstr; } var mystr='<html><head><title>Title</title><style>.container{background:#959595;color:#fff} a{color: red;}</style></head><body><div class="container">do click on <a href="#">Link</a></div></body></html>'; document.body.innerText= beautifycode(mystr);
解决方案2
1 2019-12-02 06:18:52
我之前也有过这样的需求。 谢天谢地，我找到了一个这样做的库（适当的缩进以提高可读性）。 希望这对你也有帮助：
<script src='http://lovasoa.github.io/tidy-html5/tidy.js'></script>
<script>
options = {
"indent":"auto",
"indent-spaces":2,
"wrap":80,
"markup":true,
"output-xml":false,
"numeric-entities":true,
"quote-marks":true,
"quote-nbsp":false,
"show-body-only":true,
"quote-ampersand":false,
"break-before-br":true,
"uppercase-tags":false,
"uppercase-attributes":false,
"drop-font-tags":true,
"tidy-mark":false
}
var html = document.querySelector("body").outerHTML;
var result = tidy_html5(html, options);
console.log(result);
</script>
来源： SO 答案
使用jQuery美化其他人的html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.