Jquery 实现一个简单的 HTML 代码格式化工具
Jquery 实现一个简单的 HTML 代码格式化工具，主要功能，对中英文之间加入空格，格式化 HTML 代码：
<html>
<head>
<title>HTML 代码格式化工具</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
input {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
text-align: center;
white-space: nowrap;
background-image: none;
border: 1px solid transparent;
vertical-align: middle;
-webkit-appearance: button;
background-color: #16c0f8;
bottom: 0;
right: 0;
box-shadow: none;
width: 80px;
border-radius: 0;
color: #fff;
opacity: 0.85;
margin: 0 5px;
padding: 8px 20px 7px;
text-decoration: none; /*background-color: #ddd;
color: #666;*/
box-sizing: border-box;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div style="width:60%;height:100%; margin:0 auto">
<p>
<strong>HTML 代码格式化工具</strong>
</p>
<p>
<textarea
name="oldHtmlCode"
id="oldHtmlCode"
cols="160"
rows="24"
style="width:100%;height:40%;"
></textarea>
</p>
<p style="text-align:right;">
<input type="button" name="btnFormat" id="btnFormat" value="格式化" />
</p>
<p>
<textarea
name="newHtmlCode"
id="newHtmlCode"
cols="160"
rows="24"
style="width:100%;height:40%;"
></textarea>
</p>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
$("#btnFormat").click(function() {
//匹配英文临近中文
var p1 = /([A-Za-z])((<[^<]*>)*[\u4e00-\u9fa5]+)/gi;
var r = $("#oldHtmlCode").val();
r = r.replace(p1, "$1 $2");
//匹配数字临近中文
var p2 = /([0-9])([\u4e00-\u9fa5]+)/gi;
r = r.replace(p2, "$1 $2");
//匹配中文临近数字
var p3 = /([\u4e00-\u9fa5]+)([0-9])/gi;
r = r.replace(p3, "$1 $2");
var p4 = /([\u4e00-\u9fa5]+(<[^<]*>)*)([A-Za-z])/gi;
r = r.replace(p4, "$1 $3");
//r = r.replace("） ", "）");
$("#newHtmlCode").val(format(r));
});
$("#btnFormat").click(function() {
//获取贴入文本域的需要格式化的html代码
var text = $("#origin").val();
//执行格式化函数对文本进行格式化
var fmt = format(text);
//将格式化后的代码放入文本域进行显示
$("#result").val(fmt);
});
function format(strs) {
var left = null;
var right = null;
var str = "";
var blank = "\t";
var fmt = [];
for (var i = 0; i < strs.length; i++) {
//发现左尖括号后将其位置记录在left变量上
if (strs[i] == "<") {
left = i;
} else if (strs[i] == ">") {
//发现右尖括号后将其记录在right变量上
right = i;
}
//当做尖括号右尖括号都记录了一个位置后，说明二者之间的内容为代码的一行
if (typeof left == "number" && typeof right == "number") {
//判断字符串左尖括号后是否为‘/’，如果满足，表明该行代码为双标签的闭合标签
if (strs[left + 1] == "/") {
//对数组中的空格做出栈，确保代码缩进正确
fmt.pop();
//将该行代码放入str变量中
str += fmt.join("") + strs.slice(left, right + 1);
//判断字符串右尖括号前一位是否为‘/’，如满足，表明该标签为严格闭合的单标签
} else if (strs[right - 1] == "/") {
str += fmt.join("") + strs.slice(left, right + 1);
//判断字符串开头是否包含input/imig/hr/br/link/meta等字母，用于屏蔽非严格未闭合的单标签
} else if (
strs
.slice(left, right)
.search(/\<input|\<img|\<hr|\<br|\<link|\<meta/) != -1
) {
str += fmt.join("") + strs.slice(left, right + 1);
//对双标签的左标签进行的操作
} else {
str += fmt.join("") + strs.slice(left, right + 1);
//向数组中堆入一个空格，确保下一行双标签的左标签的缩进正确
fmt.push(blank);
}
//对 right 位置后的字符串进行遍历
for (var j = right; j < strs.length; j++) {
//查找right位置后，第一个左尖括号的位置，二者之间的内容即为代码中的文本内容
if (strs[j] == "<") {
//去掉文本中多余的空格
var s = strs.slice(right + 1, j).replace(/\s*/g, "");
if (s) {
// 当文本中去掉空格后任然有内容，则将文本拼入 str 变量进行存储
str += s;
}
break;
}
}
// 每次获得一次左右尖括号的位置后，即得到了一行代码，为代码做换行处理
str += "\n";
// 重置 left、right 的值，用于 for 循环的下次存储做右尖括号的位置
left = null;
right = null;
}
}
// 返回得到的格式化完成的 html 代码字符串
return str;
}
});
</script>
目前还不是很完善，只是解决了自己常用的一些场景。
浙公网安备 33010602011771号