htmlparse

<html>
    <head>
        <style>
            textarea{
                width:800px;
                height:250px;
            }
        </style>
        <script>
           /**
           *Dom 类
           *存储Dom树节点
           */
           function Dom() {
               this.tag = "";
               this.attributes=[];// id class style name
               this.innerHtml = "";
               this.parent = "";
               this.children=[];
               this.num = 0;
               this.cssNums =[];
               this.each = function() {
               }
           }
           /**
           *HtmlParser类
           *解析html文档
           */
           function HtmlParser(html) {
               this.parse = function(html,pDom) {
                   var dom = new Dom();
                   // 生成节点编号
                   dom.num = 1;
                   // 获取节点标签
                   dom.tag = this.getTag(html);
                   // 获取节点属性
                   dom.attributes = this.getAttributes(html);
                   // 获取节点innerHtml
                   dom.innerHtml = this.getInnerHtml(html);
                   // 生成节点父亲
                   dom.parent = pDom;
                   // 生成节点孩子 ==>如果innerHtml中有孩子，生成孩子，否则结束
                   if(this.isExistNode(dom.innerHtml)) {
                       var nodes = this.splitNodes(dom.innerHtml);
                       for (var i=0;i < nodes.length;i++) {
                           var childDom = this.parse(nodes[i],dom);
                           dom.children.push(childDom);
                       }
                   }
                   return dom;
               };
               // 获取节点的标签
               this.getTag = function(html) {
                   var tag = "tag";
                   var tagStart = html.indexOf('<');
                   var spacePst = html.indexOf(' ',tagStart);
                   var rightPst = html.indexOf('>',tagStart);
                   var tagEnd = rightPst;
                   if (spacePst!=-1 && spacePst<rightPst) {
                       tagEnd = spacePst;
                   }
                   tag = html.substring(tagStart,tagEnd);
                   return tag;
               }
               // 获取节点的属性
               this.getAttributes = function(html) {
                   var attributes = "attributes";
                   return attributes;
               }
               // 获取节点的innerHtml
               this.getInnerHtml = function(html) {
                   var innerHtml = "innerHtml";
                   return innerHtml;
               }
               // 判断innerHtml 中是否有节点
               this.isExistNode = function (html) {
                   return false;
               }
               // 将innerHtml 分割成孩子节点数组，必须保证里面有节点才能调用该函数
               this.splitNodes = function (html) {
                   var nodes = [];
                   return nodes;
               }
           }
           // 主函数
            function main(){
                var html = document.getElementById("content");
               var htmlParser = new HtmlParser();
                var dom = htmlParser.parse(html,"");
               alert(dom.num + " " +dom.tag + " " + dom.attributes +" " +dom.innerHtml);
                document.getElementById("result").value = dom;
            }
        </script>
    </head>
    <body>
        <textarea id="content"></textarea>
        <input type="button" value="转换" onclick="main()"/>
        <textarea id="result"></textarea>
    </body>
</html>

巴特西

htmlparse

最新文章

热门文章