HTML标签是否匹配检测代码
添加时间: 2005-6-9 4:53:43 作者: 网络收集 阅读次数:61 来源: http://d9soft.com
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
//去掉字串中的空格
function NoSpace(txt){
return (txt.replace(/[\s]+/g,''))
}
//判断<aaa>与</aaa>是配对的html标签
function IsGood(txt1,txt2){
var txt='<'+'/'+txt1.substr(1);
return (txt==txt2)?1:0;
}
function chk(){
//s为模拟的html代码
//var s="d<html>fg<table>sdfg<img><tr>asdfg<td>6456</td>dfg</tr>dsfg</table>d</html>fg";
var s=NoSpace(oT.value).toLowerCase();
var arrMinus=new Array('<img>','<input>','<meta>','<hr>');
for (var i=0;i<arrMinus.length;i++){
s=s.replace(arrMinus[i],'');
}
var arrElement=s.match(/<[/A-Za-z]+>/ig);//取出所有的<....>格式的字串
var stack=new Array();
stack[0]='#';k=0;//定义一个顺序栈,栈底放入#,k为栈顶指针
for (var j=0;j<arrElement.length;j++){
if (IsGood(stack[k],arrElement[j]))
{k--;stack.length--;}//如果配对,栈顶元素出栈
else
{stack[++k]=arrElement[j];}//如果不配对,新标签入栈
alert(stack[k]);//演示栈顶的内容
}
(stack[k]=="#")?(document.write("所有的标签匹配")):(document.write("有的标签不匹配"));
}
//-->
</SCRIPT>
<TEXTAREA NAME="oT" ROWS="10" COLS="90">
<HTML>
<META>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<img><input>
</BODY>
</HTML>
</TEXTAREA>
<BR><BR>
原理：建一个栈，每次碰到一个新标签，就与栈顶的标签配对，如果配对，栈顶的标签就出栈，如果不配对，这个新标签就进栈，最终，栈如果是空的，说明所有的标签都是配对的，如果栈不空，说明有不配对的地方<BR>
框中是模拟的html代码，你可以修改后，点下面的按钮，看是不是匹配。<BR>
弹出的对话框是演示栈顶的内容<BR>
特点：<BR>1、还不能判断<...>哪些是合法的html标签，可以在代码中直接输入合法标签，工作量太大。<BR>2、有的标签是不需配对的,如<img>,代码智能判断为匹配的。<BR>3、目前还不支持标签后加属性
<BR><BR>
<INPUT TYPE="button" value="Start" onclick="chk()">
</BODY>
</HTML>
上一篇文章: CSS轻松实现色块标题标识 下一篇文章: 将HTML自动转为JS代码
相关文章: