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的更多相关文章
- 使用htmlparse爬虫技术爬取电影网页的全部下载链接
昨天,我们利用webcollector爬虫技术爬取了网易云音乐17万多首歌曲,而且还包括付费的在内,如果时间允许的话,可以获取更多的音乐下来,当然,也有小伙伴留言说这样会降低国人的知识产权保护意识,诚 ...
- 【vuejs深入二】vue源码解析之一,基础源码结构和htmlParse解析器
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...
- 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
- HtmlParse:一款超轻量级的HTML文件解析和爬取工具
HtmlParse 是一款基于windwos平台的HTML文档解析工具,可快速构建DOM树,从而轻松实现网页元素的爬取工作.DOM树就是一个HTML文档的节点树,每个节点由:标签(Tag).属性(At ...
- Android项目---HtmlParse
在解析网站上的内容的时候,总会出现很多html的标签,一般在遇到这种数据的时候,就可以用上Html 如: content.setText(Html.fromHtml("<html> ...
- vue.js 源代码学习笔记 ----- html-parse.js
/** * Not type-checking this file because it's mostly vendor code. */ /*! * HTML Parser By John Resi ...
- R自动数据收集第二章HTML笔记1(主要关于handler处理器函数和帮助文档所有示例)
本文知识点: 1潜在畸形页面使用htmlTreeParse函数 2startElement的用法 3闭包 4handler函数的命令和函数体主要写法 5节点的丢弃,取出,取出标签名称.属性.属 ...
- R自动数据收集第一章概述——《List of World Heritage in Danger》
导包 library(stringr) library(XML) library(maps) heritage_parsed <- htmlParse("http://en ...
- Coursera-Getting and Cleaning Data-Week2-课程笔记
Coursera-Getting and Cleaning Data-Week2 Saturday, January 17, 2015 课程概述 week2主要是介绍从各个来源读取数据.包括MySql ...
随机推荐
- 洛谷P1018乘积最大——区间DP
题目:https://www.luogu.org/problemnew/show/P1018 区间DP+高精,注意初始化和转移的细节. 代码如下: #include<iostream> # ...
- DataGridColum的bug
Datagrid有多个bug: 1,不支持DynamicResource的东西 2, 在Column隐藏后再显示, ColumnHeader的Tag或者DataContext为null. 解决办法: ...
- ZigBee协议
转载地址http://www.feibit.com/bbs/viewthread.php?tid=140&extra=page%3D1 WSN/Zigbee开源协议栈 1. msst ...
- zk 04之 Zookeeper Api(java)与应用
如何使用 Zookeeper 作为一个分布式的服务框架,主要用来解决分布式集群中应用系统的一致性问题,它能提供基于类似于文件系统的目录节点树方式的数据存储,但是 Zookeeper 并不是用来专门存储 ...
- hibernate学习 六 Hibernate缓存
缓存: 如果在集群环境下使用Hibernate时,(集群有节点A ,节点B) 当请求,发往A节点,A在数据库中修改了一条记录,然后节点B的缓存中如何实时的更新节点A修改的新数据 hi ...
- windows 代理无法设置上不了网的解决
--- title:windows 代理无法设置的解决 date: 2018-09-12 14:07:04 tags: windows 上网 --- ## 问题描述 Internet 属性 -> ...
- css如何改变placeholder的默认颜色值
input:-moz-placeholder {/* Mozilla Firefox 4 to 18*/ color: red; input::-moz-placeholder {/* Mozilla ...
- boost编译配置及简单使用
boost编译配置及简单使用 1.下载 http://www.boost.org/ 2.编译: A.解压 boost_1_55_0.zip 到boost路径 B.运行 bootstrap.bat. 会 ...
- SetROP2
一个Windows API SetROP2(int nDrawMode)的使用 该函数的主要的作用是根据nDrawMode设置的方式重新设定绘图的方式,下面就不同的nDrawMode值具体解释绘图模式 ...
- 利用URL重写隐藏复杂的URL
第一步:模拟映射页面 我们想在一个页面上点击guid.html链接,跳转到比较复杂URL的guid_{492f3e0b-848e-11da-9550-00e08161165f}.html页面.即定义一 ...