标记语言处理模型（演示版）

　标记语言处理模型（演示版）

作者：色眯眯的小疯狗　时间： 2003-11-04　文档类型：原创　来自：蓝色理想

这是一个模仿html，xml语言从文本转化为对象这一过程的模型，并降低了一些如tagName不能修改，包围标记只能是“<”、“>”等的限制，尽可能的扩大对文本的自由处理。

通过这个模型也就可以制作出如 html 和 ubb 的双向转换程序，Internet Explorer中显示XML文档一样有hightLight和折叠功能的视图等一系列的关于标记语言的实例程序。

标记语言处理模型

<TextArea id="code" rows=15 cols=100>
	[b color=#FF0000]aaa
		<B>[i]bbb[/i]</B>
		<B>ccc</B>
		[u]eeee
	[/b]
	
	<B>ddd</B>
</TextArea><br />
<h3>属性</h3>
<button onclick="alert(firstchildren.tagName)">tagName</button>
<button onclick="alert(firstchildren.childNodes)">childNodes</button>
<button onclick="alert(firstchildren.attributes)">attributes</button>
<hr />
<h3>方法</h3>
<button onclick="alert(firstchildren.getOuterHTML())">getOuterHTML</button>
<button onclick="alert(firstchildren.getInnerHTML())">getInnerHTML</button>
<button onclick="alert(firstchildren.getAttributeNode('color').value)">getAttributeNode</button>
<button onclick="alert(firstchildren.getChildren())">getChildren</button>
<button onclick="alert(firstchildren.all())">all</button>
<hr />
<h3>实例</h3>

<script>
	function ubb2html()
	{
		var ubbDocument	= MarkupLanguageDocument(code.value, "[", "]")
		var allObject	= ubbDocument.all()
		
		for (var i=0; i<allObject.length; i++)
		{
			if (allObject[i].tagName == "b")
			{
				allObject[i].lt	= "<"
				allObject[i].gt	= ">"
			}
		}
		
		alert(ubbDocument.getOuterHTML())
	}
</script>

<button onclick="ubb2html()">ubb2html</button>
<xmp style="background-color: #EEEEEE; padding: 10px;">
	function ubb2html()
	{
		var ubbDocument	= MarkupLanguageDocument(code.value, "[", "]")
		var allObject	= ubbDocument.all()
		
		for (var i=0; i<allObject.length; i++)
		{
			if (allObject[i].tagName == "b")
			{
				allObject[i].lt	= "<"
				allObject[i].gt	= ">"
			}
		}
		
		alert(ubbDocument.getOuterHTML())
	}
</xmp>

<script>

	String.prototype.getAbsReg	= function(s)
	{
		var absStr	= this.match(/(\\______rela:-?\d+______|\\.[^\\]*|[^\\]*)/g)
	
		while (absStr.length-1)
		{
			if (/^\\______rela:-?\d+______$/.test(absStr[1]))	absStr[1]	= "\\" + (parseInt(absStr[1].match(/-?\d+/g)) + absStr[0].match(/\(/g).length)
			absStr[0]	= absStr.shift() + absStr[0]
		}
	
		return new RegExp(absStr.join(""), s)
	}

	RegExp.prototype.getRelaStr	= function()
	{
		var regStr	= this.source
		var relaStr	= regStr.match(/(\\\d+|\\.[^\\]*|[^\\]*)/g)
		
		while (relaStr.length-1)
		{
			if (/^\\\d+$/.test(relaStr[1]))		relaStr[1]	= "\\______rela:" + (parseInt(relaStr[1].match(/\d+/g)) - relaStr[0].match(/\(/g).length) + "______"
			relaStr[0]	= relaStr.shift() + relaStr[0]
		}
		
		return relaStr.join("")
	}
</script>

<script>

	function MarkupLanguageDocument(html, lt, gt)
	{
		function htmlElement(tagName)
		{
			this.tagName	= tagName
			this.childNodes	= new Array()
			this.attributes	= new Array()
			
			this.setInnerHTML	= function(html, lt, gt)
			{
				this.childNodes	= parseHTML(html, lt, gt)
				return		this.childNodes
			}
			
			this.getInnerHTML	= function ()
			{
				var childrenHTML	= ""
				
				for (var i=0; i<this.childNodes.length; i++)
				{
					childrenHTML += (this.constructor == this.childNodes[i].constructor) ? this.childNodes[i].getOuterHTML() : this.childNodes[i]
				}				
				
				return childrenHTML
			}
			
			this.getOuterHTML	= function()
			{
				var tagName		= this.tagName
				var childrenHTML	= this.getInnerHTML()
				var attrHTML		= ""
				
				for (var i=0; i<this.attributes.length; i++)
				{
					attrHTML	+= (this.attributes[i].name + (this.attributes[i].value ? "=\"" + this.attributes[i].value + "\" " : " "))
				}
				
				return tagName ? this.lt + tagName + (attrHTML ? " "+attrHTML : "") + (childrenHTML ? this.gt + childrenHTML + this.lt + "/" + tagName + this.gt : "/" + this.gt) : childrenHTML
			}
			
			this.getAttributeNode	= function(name)
			{
				for (var i=0; i<this.attributes.length; i++)
				{
					if (this.attributes[i].name == name)	return this.attributes[i]				
				}
				
				return null
			}
			
			this.getChildren	= function()
			{
				var childrenArray	= new Array()
				
				for (var i=0; i<this.childNodes.length; i++)
				{
					if (this.constructor == this.childNodes[i].constructor)	childrenArray[childrenArray.length] = this.childNodes[i]
				}
				
				return childrenArray
			}
			
			this.all		= function()
			{
				var allArray	= new Array()
				var children	= this.getChildren()
				
				for (var i=0; i<children.length; i++)
				{
					allArray[allArray.length]	= children[i]
					
					if (children[i].getChildren())
					{
						allArray = allArray.concat(children[i].all())
					}
				}
				
				return allArray
			}
		}
		
		function attributeObj(name, value)
		{
			this.name	= name
			this.value	= value
		}

		function parseHTML(html, lt, gt)
		{
			var lt		= lt ? lt.charAt(0) : "<"
			var gt		= gt ? gt.charAt(0) : ">"
			var lt1		= lt.replace(/([\[\]\.])/, "\\$1")
			var gt1		= gt.replace(/([\[\]\.])/, "\\$1")
			
			//字符串正则:		如 "abc"
			var strRe	= /(["'])(\\["'tbnr]|[^\1])*?\1/
			
			//属性正则:		如 <span attribute="abc"> 中的 attribute="abc"
			var attrRe	= ("(\\w+)(\\s*=\\s*(" + strRe.getRelaStr() + "|[^\\s"+gt1+"]+)|.{0})").getAbsReg()
			
			//标签名正则:		如 <span attribute="abc"> 中的 span
			var tagRe	= /((\w+:)?\w+)/
			
			//标识单Target正则:	如 <span /> 中的 /
			var sTagRe	= new RegExp("\\\/\\s*(?=" + gt1 + ")")
			
			//标识Target关闭正则:	如 </span> 中的 /
			var cTagRe	= /\/\s*/
			
			//对象正则:		如 <span attribute="abc" />
			var objRe	= (lt1 + "(" + cTagRe.getRelaStr() + ")?" + tagRe.getRelaStr() + "(" + attrRe.getRelaStr() + "|\\s)*?(" + sTagRe.getRelaStr() + ")?" + gt1).getAbsReg()
			
			//节点正则:		如 this is a <img src="simple.jpg" /> 中的 this is a 和 <img src="simple.jpg" />
			var nodeRe	= ("(" + objRe.getRelaStr() + "|[^" + lt1 + "]*)").getAbsReg()
			
			var htmlArray	= new Array()
			var node	= ""
			var tmpObj	= null
		
			function getfisrtNode(html)
			{
				return new function()
				{
					this.nodeValue	= nodeRe.test(html)		? html.match(nodeRe)[0] : ""
					this.otherHTML	= html.substr(this.nodeValue.length, html.length)
					this.tagName	= tagRe.test(this.nodeValue)	? this.nodeValue.match(tagRe)[0] : undefined
					
					var tmpAttrStr	= this.nodeValue.replace(tagRe, "")
					var tmpArrtRe	= new RegExp(attrRe.source, "g")
					this.attrs	= tmpArrtRe.test(tmpAttrStr)	? tmpAttrStr.match(tmpArrtRe) : new Array()
				}		
			}
			
			while(html)
			{
				tmpNode		= getfisrtNode(html)
				node		= tmpNode.nodeValue
				html		= tmpNode.otherHTML
				
				if (objRe.test(node))
				{
					var tagName	= tmpNode.tagName
					var childrenhtml= ""
					var j		= sTagRe.test(node) ? 0 : 1
					var attrsObj	= new Array()
					node		= new htmlElement(tagName)
					
					for (var i=0; i<tmpNode.attrs.length; i++)
					{
						var tmpAr	= tmpNode.attrs[i].match(attrRe)
						attrsObj[i]	= new attributeObj(tmpAr[1], tmpAr[3].replace(/^(["'])([.\s\S]*?)\1$/, "$2"))
					}
					
					node.attributes	= attrsObj
					node.lt		= lt
					node.gt		= gt
				
					while (j && html)
					{
						var tmpNode	= getfisrtNode(html)
						html		= tmpNode.otherHTML
						
						if (tmpNode.tagName == tagName && !(sTagRe.test(tmpNode.nodeValue)))
						{
							("^" + lt1 + cTagRe.getRelaStr()).getAbsReg().test(tmpNode.nodeValue) ? j-- : j++
						}
						
						if (j)		childrenhtml	+=tmpNode.nodeValue
					}
					
					node.childNodes	= parseHTML(childrenhtml, lt, gt)
				}
			
				htmlArray[htmlArray.length]	= node
			}
			
			return htmlArray
		}
		
		var mlDocument		= new htmlElement()
		mlDocument.childNodes	= parseHTML(html, lt, gt)
		
		return mlDocument
	}

	var parseDocument	= MarkupLanguageDocument(code.value, "[", "]")
	var firstchildren	= parseDocument.childNodes[1]
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

这个程序的处理方法大致是通过正则表达式的拼接（getAbsReg 和 getRelaStr 这两个自定义函数），从字符串 → 属性 → 对象 → 节点一级级的拼接出他们的正则表达式，然后再从节点开始反向的从文本流中提取对应的内容，再将他们设置到 htmlElement 类的相应的属性上，也就是看到了 [object object]。

最后实例程序通过设置和使用 htmlElement 中提供属性和方法，将文本的每一个细节修改到最终所需要的状态，最后使用getOutetHTML或是getInnerHTML方法得到处理之后的文本流。

另外，用这种方法处理还可以达到标记自动补全的功能。

出处：蓝色理想
责任编辑：LeXRus

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

网站设计的标准时代

作者文章

TAB键的缩排处理


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule