网页特效代码:检测 HTML 标签是否匹配

王朝html/css/js·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

<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、有的标签是不需配对的,如&ltimg&gt,代码智能判断为匹配的。<BR>3、目前还不支持标签后加属性

<BR><BR>

<INPUT TYPE="button" value="Start" onclick="chk()">

</BODY>

</HTML>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航