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

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

標(biāo)記語言處理模型
<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>實(shí)例</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()//標(biāo)簽名正則:如 <span attribute="abc"> 中的 spanvar tagRe= /((\w+:)?\w+)///標(biāo)識單Target正則:如 <span /> 中的 /var sTagRe= new RegExp("\\\/\\s*(?=" + gt1 + ")")//標(biāo)識Target關(guān)閉正則:如 </span> 中的 /var cTagRe= /\/\s*///對象正則:如 <span attribute="abc" />var objRe= (lt1 + "(" + cTagRe.getRelaStr() + ")?" + tagRe.getRelaStr() + "(" + attrRe.getRelaStr() + "|\\s)*?(" + sTagRe.getRelaStr() + ")?" + gt1).getAbsReg()//節(jié)點(diǎn)正則:如 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 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

這個程序的處理方法大致是通過正則表達(dá)式的拼接（getAbsReg 和 getRelaStr 這兩個自定義函數(shù)），從 字符串 → 屬性 → 對象 → 節(jié)點(diǎn) 一級級的拼接出他們的正則表達(dá)式，然后再從節(jié)點(diǎn)開始反向的從文本流中提取對應(yīng)的內(nèi)容，再將他們設(shè)置到 htmlElement 類 的相應(yīng)的屬性上，也就是看到了 [object object]。

最后實(shí)例程序通過設(shè)置和使用 htmlElement 中提供屬性和方法，將文本的每一個細(xì)節(jié)修改到最終所需要的狀態(tài)，最后使用getOutetHTML或是getInnerHTML方法得到處理之后的文本流。

另外，用這種方法處理還可以達(dá)到標(biāo)記自動補(bǔ)全的功能。 （出處：藍(lán)色理想）大多數(shù)人在上網(wǎng)的時候，都會瀏覽網(wǎng)頁提供給我們的信息。