標記語言處理模型（演示版）

網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。
這是一個模仿html，xml語言從文本轉化為對象這一過程的模型，并降低了一些如tagName不能修改，包圍標記只能是“<”、“>”等的限制，盡可能的擴大對文本的自由處理。

通過這個模型也就可以制作出如 html 和 ubb 的雙向轉換程序，Internet Explorer中顯示XML文檔一樣有hightLight和折疊功能的視圖等一系列的關于標記語言的實例程序。

標記語言處理模型
<TextArea id="code" rows=15 cols=100>[b color=#FF0000]aaa<B>bbb</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.sourcevar 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= tagNamethis.childNodes= new Array()this.attributes= new Array()this.setInnerHTML= function(html, lt, gt){this.childNodes= parseHTML(html, lt, gt)returnthis.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.tagNamevar 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= namethis.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"> 中的 spanvar 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="http://www.okasp.com/techinfo/simple.jpg" /> 中的 this is a 和 <img src="http://www.okasp.com/techinfo/simple.jpg" />var nodeRe= ("(" + objRe.getRelaStr() + "|[^" + lt1 + "]*)").getAbsReg()var htmlArray= new Array()var node= ""var tmpObj= nullfunction 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] : undefinedvar 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.nodeValuehtml= tmpNode.otherHTMLif (objRe.test(node)){var tagName= tmpNode.tagNamevar childrenhtml= ""var j= sTagRe.test(node) ? 0 : 1var 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= attrsObjnode.lt= ltnode.gt= gtwhile (j && html){var tmpNode= getfisrtNode(html)html= tmpNode.otherHTMLif (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方法得到處理之后的文本流。

另外，用這種方法處理還可以達到標記自動補全的功能。 （出處：藍色理想）大多數人在上網的時候，都會瀏覽網頁提供給我們的信息。