Js完成对html信息的提取

最新推荐文章于 2019-07-22 16:50:00 发布

雨落

最新推荐文章于 2019-07-22 16:50:00 发布

阅读量431

点赞数

分类专栏： web开发 Javascript 文章标签： html string 正则表达式 xhtml function

本文链接：https://blog.csdn.net/anbo724/article/details/6590858

版权

web开发同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

Javascript

12 篇文章 0 订阅

订阅专栏

主要是我自己的项目服务的：

下面先介绍一下对应的html文件：对应的名字是fanli.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type = "text/javascript" src = "./extratInfo.js"></script>
<title> 范例html </title>

<style>
      p {
						  font-family: 'Tangerine', serif;
						  font-size: 48px;
						  text-shadow: 4px 4px 4px #aaa;
				}
			h1 {
					  font-family: 'An', serif;
					  font-size: 48px;
					  text-shadow: 4px 4px 4px #aaa;
			}
</style>
</head>
<body>
	<h1>你好</h1> 
	<p>大家好</p>
</body>
</html>

现在需要得到的是，那部分tag对应的是那些字体，已经字体中对应的那些字符：下面是对应的js文件，Js文件是通过上面的<script type = "text/javascript" src = "./extratInfo.js"></script>引入的，是与html文件在同一目录下的名字为extractInfo.js的文件：

extractInfo.js文件内容：

/*
这个函数的作用是获得html中对应的tag--font数据
另外还应该获得对应的html中tag--string数据
这些当做参数传递给别的函数

*/

window.οnlοad=function(){
		 //alert("第一个alert");
	   var style = document.getElementsByTagName("style");//.getElementsByTagName("style");
	   //var tt = title[0].innerHTML;
	   var tcontent = style[0].innerHTML;
	  
	   
	   var map_tag_font = {}; //存放 <font-tag>的map数组
	   while(tcontent.indexOf("font-family") > 0 )
	   {
	   		var posB = tcontent.indexOf("{");//一个tag定义的开始与结束
	   		var posE = tcontent.indexOf("}");
	   		
	   		
	   		if(posB > 0 && posE >0 && posB < posE)//说明存在一组{},这是前提条件
	   		{
	   			var num = 3;
	   			while(tcontent.charAt(posB - num) != "") { num++;}
	   			var tag1 = tcontent.substring(posB - num+1, posB);
	   			var pos = tcontent.indexOf("'");
	   			tcontent = tcontent.substr(pos + 1,tcontent.length);
	   			pos = tcontent.indexOf("'");
	   			var font1 = tcontent.substr(0,pos);
	   			tag1 =tag1.replace(/(^\s*)|(\s*$)/g, ""); //这个正则表达式的作用是去空格
	   			map_tag_font[tag1] = font1; 
	   			posE = tcontent.indexOf("}");
	   			tcontent = tcontent.substr(posE + 1,tcontent.length);
	   			//准备下一轮
	   			posB = tcontent.indexOf("{");
	   			posE = tcontent.indexOf("}");
	   			}//if	
	   	}//while
	   
	   		
	   	//下面要尝试着提取tag对应的string了
	   	//alert("开始");
	   	var map_tag_string = {}; //存放tag-string
	   	var bcontent= document.getElementsByTagName("body")[0].innerHTML;
	   	//alert(bcontent);
	   	for(key in map_tag_font) //对每一个已经录进去的tag进行查找，没在的就不用管了
	   	{
	   		//alert(key+key.length);
	   		var pos = bcontent.indexOf(key);
	   		if(pos >= 0)
	   		{
	   			//如果存在这个标签的话
	   			var tempC = bcontent.substr(pos+key.length+1);
	   			pos = tempC.indexOf(key); //这个是查找对应的结尾符号</p>
	   			var kcontent = tempC.substr(0,pos -2);
	   			map_tag_string[key]= kcontent; //赋值
	   		}//if
	   	}//for

	   	var map_font_string = {};//这个是用来存放对应的font-string
	   	for(key in map_tag_font)
	   	{
	   		var font_value = map_tag_font[key];
	   		map_font_string[font_value] = map_tag_string[key]; //把结果对应起来，font-string
	   	}//for
	   	
	   	//检验结果 
	   	for(key in map_font_string)
	   	{
	   		alert(key+":"+map_font_string[key]);
	   	}//for
	   	
	   	
	   	
	   	
	   
	}

可以得到想要的结果！

雨落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js完成对html信息的提取

主要是我自己的项目服务的：下面先介绍一下对应的html文件：对应的名字是fanli.html 范例html p { font-family: 'Tangerine', serif; font-size:
复制链接

扫一扫