<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的更多相关文章

  1. 使用htmlparse爬虫技术爬取电影网页的全部下载链接

    昨天,我们利用webcollector爬虫技术爬取了网易云音乐17万多首歌曲,而且还包括付费的在内,如果时间允许的话,可以获取更多的音乐下来,当然,也有小伙伴留言说这样会降低国人的知识产权保护意识,诚 ...

  2. 【vuejs深入二】vue源码解析之一，基础源码结构和htmlParse解析器

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...

  3. 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...

  4. HtmlParse：一款超轻量级的HTML文件解析和爬取工具

    HtmlParse 是一款基于windwos平台的HTML文档解析工具,可快速构建DOM树,从而轻松实现网页元素的爬取工作.DOM树就是一个HTML文档的节点树,每个节点由:标签(Tag).属性(At ...

  5. Android项目---HtmlParse

    在解析网站上的内容的时候,总会出现很多html的标签,一般在遇到这种数据的时候,就可以用上Html 如: content.setText(Html.fromHtml("<html> ...

  6. vue.js 源代码学习笔记 ----- html-parse.js

    /** * Not type-checking this file because it's mostly vendor code. */ /*! * HTML Parser By John Resi ...

  7. R自动数据收集第二章HTML笔记1(主要关于handler处理器函数和帮助文档所有示例)

    本文知识点:     1潜在畸形页面使用htmlTreeParse函数 2startElement的用法 3闭包 4handler函数的命令和函数体主要写法 5节点的丢弃,取出,取出标签名称.属性.属 ...

  8. R自动数据收集第一章概述——《List of World Heritage in Danger》

      导包     library(stringr) library(XML) library(maps) heritage_parsed <- htmlParse("http://en ...

  9. Coursera-Getting and Cleaning Data-Week2-课程笔记

    Coursera-Getting and Cleaning Data-Week2 Saturday, January 17, 2015 课程概述 week2主要是介绍从各个来源读取数据.包括MySql ...

随机推荐

  1. 洛谷P2024食物链——并查集补集的灵活运用

    题目:https://www.luogu.org/problemnew/show/P2024 自己在做本题时最大的障碍就是:不会在一个集合的father改变时把相应的补集也跟着改变. 借鉴题解后,才明 ...

  2. javascript私有属性失效及解决方案

    1.js创建私有属性的方法 在 javascript 中所有对象的成员是公有的 构造函数也是如此: function Gadget ( ) { this.name = ' jack '; this.p ...

  3. WPF命令使用

    What 命令包含以下部分: 命令:一个实现了ICommand接口的类,RoutedCommand是WPF里最常用的命令类,其它命令类大多派生自RoutedCommand 命令源:触发命令的对象,如b ...

  4. php封装pdo操作数据的工具类

    <?php header("Content-Type:text/html;charset=utf-8"); class PdoMysql{ public static $co ...

  5. MS SQL Server的LTRIM，RTRIM和TRIM函数

    在MS SQL Server 2017有了一个新函数TRIM,整合以前版本LTRIM和RTRIM. 这几个函数都是去除字符串头部后尾部的空格. DECLARE @str NVARCHAR(MAX) = ...

  6. Fedora/CentOS使用技巧

    命令 获取系统安装包的编译源码及脚本 # dnf download --source package # yumdownloader --source virt-viewer 远程连接windows ...

  7. UOJ #32. 【UR #2】跳蚤公路【Floydbellman-ford】

    首先看这个范围很夸张但是其实有限制的也就在1e18*n范围里(走完一圈的边权),然后限制一定是有负环 用Floyd传递闭包,然后设f[i][j][k]为从1走了i步到j并且有k个x的最短路,用B-F处 ...

  8. 洛谷P3110 [USACO14DEC]驮运Piggy Back

    P3110 [USACO14DEC]驮运Piggy Back 题目描述 贝西和她的妹妹艾尔斯白天在不同的地方吃草,而在晚上他们都想回到谷仓休息.聪明的牛仔,他们想出了一个计划,以尽量减少他们在步行时花 ...

  9. Java基础--基本规则、语法

    一.关键字.保留字.标识符.常量.变量 1.关键字:使用某种语言赋予特殊含义的单词. 2.保留字:没有赋予特殊含义,但以后可能会使用的单词. 3.标识符:自定义的单词,以数字.字母.下划线以及$符组成 ...

  10. 封装MySQL的单例，连接数据库并对数据进行增删改查操作

    单例: 一个类只能有一个对象 应用场景:多次请求数据库只需要一个连接对象. 实现:三私一公 1.私有的静态属性用来保存对象的单例2.私有的构造方法用来阻止在类的外部实例化3.私有的__clone阻止在 ...