Jquery实现⼀个简单的HTML代码格式化⼯具Jquery 实现⼀个简单的 HTML 代码格式化⼯具，主要功能，对中英⽂之间加⼊空格，格式化 HTML 代码：
<html>
<head>
<title>HTML 代码格式化⼯具</title>
<script src="code.jquery/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;
jquery在一个元素后追加标签
cursor: pointer;
}
</style>
</head>
<body>
<div >
<p>
<strong>HTML 代码格式化⼯具</strong>
</p>
<p>
<textarea
name="oldHtmlCode"
id="oldHtmlCode"
cols="160"
rows="24"
></textarea>
</p>
<p >
<input type="button" name="btnFormat" id="btnFormat" value="格式化" />
</p>
<p>
<textarea
name="newHtmlCode"
id="newHtmlCode"
cols="160"
rows="24"
></textarea>
></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>
⽬前还不是很完善，只是解决了⾃⼰常⽤的⼀些场景。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。