当前位置:秋叶网络博客 前端设计 ◊ Html字符串筛选提取指定节点

Html字符串筛选提取指定节点

作者:秋叶 发表时间:2017年3月17日

拿到一个字符串,而这个字符串恰好是html结构的,也就是里面有标签节点,我们要把某个id或者class的节点从中分离出来,那么怎么做呢?当然是正则匹配提取切割技术的混搭使用啦,为了方便复用我又写了一个函数,走到哪用到哪!这篇文章的标题就是《Html字符串筛选提取指定节点》。

这一招很有实用性,实用性在哪呢?想想网站的无刷新ajax,通过这篇文章的代码学习,你将会喜欢上ajax,完全不需要后端的接口。只要有个网址,ajax请求下,再把返回的html有用信息提取出来,通过id和class都可拿到该节点里面的所有html,再插到页面中,这就是全站ajax的精华。

function getNode(node,html){
	var type=node.charAt(0);//获取类型,支持 #id、.class和tag三种类型;
	var selector,data,regExp;
	if(type=="#"){
		selector=node.substring(1);
		regExp=new RegExp('<[a-zA-Z]+[^>]+id=\"\\s*' + selector + '\\s*\"[^>]*>',"gi");
	}else if(type=="."){
		selector=node.substring(1);
		regExp=new RegExp('<[a-zA-Z]+[^>]+class=(\"' + selector + '\"|\".*?\\s*' + selector + '\"|\"' + selector + '\\s*.*?\"|\".*?\\s*' + selector + '\\s*.*?\")[^>]*>',"gi");
	}else{
		selector=node;
		regExp=new RegExp('<' + selector + '(>|\\s+[^>].*?>)',"gi");
	}

	if(!html.match(regExp)){
		console.log("在指定字符串中没有找到节点!")
		return "";
	}
	var matchArr=html.split(match);
	var match=html.match(regExp)[0];
	if(matchArr.length > 2){//多次匹配则取第一次匹配,其余忽略
		var data=matchArr.filter(function(n,index){
			return index!==0;
		}).join("");
	}else{
		var data = html.split(match)[1];
	}
       var tagName=match.match(/<(([a-zA-Z]+)|([a-zA-Z]+)\s+)/)[1],
     	tagLength=tagName.length+3;
        var depth = 1;
        var output = '';
        while(depth > 0) {
        var temp = data.split('')[0];
        var i = 0;
        var pos = temp.indexOf("<" + tagName);
        while (pos != -1) {
            i++;
            pos = temp.indexOf("<" + tagName, pos + 1);
        }
        depth = depth + i - 1;
        output = output+data.split('')[0] + '';
        data = data.substring(data.indexOf('') + tagLength);
    }
    return output.slice(0,-tagLength);
}

我在这个函数里面做了很充足的html书写不规范兼容性,比如<div id="mizuiren">666</div>、<div id=" mizuiren">666</div>、<div id="mizuiren ">666</div>、<div id=" mizuiren ">666</div>都可匹配到id为mizuiren的节点,注意看空格。

同理class也可匹配<div class="mizuiren"></div>、<div class=" mizuiren com"></div>、<div class="mizuiren com"></div>等等多个或者不规范的写法,但不是错误的写法。

除了提取id和class还可以提取标签,比如div、span、i、等所有标签。类似于jq的选择器但又不同。

需要注意的是无论提取何种类型,都只能是唯一性,如果你给的id和class在字符串中找到多个,只会取第一个匹配节点,匹配节点里面可能会有匹配节点。这不是bug,故意做成这样的~。最好就是保证选择器的唯一性吧,比如用id?

举个栗子,有如下字符串:

var html = '<i>不要看啦,我是字符串。</i><div class="xiaoming" id="xiao">小明<i><div class="qiuleqiu">666</div><div class="dream"></div><div class="dream" id="javasript">var me="秋叶";</div></i><div class="d"><strong class="this">人文风情<strong>哈哈哈哈</strong><li></li> </strong></div>what?</div><div class="good">dewfq</div><div class="xiaoming" id="xiao">小红</div>';

提取节点示例:

getNode(".xiaoming",html);
1
 
getNode("#xiao",html);
2
 
getNode(".qiuleqiu",html);
3
 
getNode("strong",html);
3

转载请保留链接:Html字符串筛选提取指定节点 | 出处:秋叶个人博客| 本文链接地址:http://www.mizuiren.com/477.html
目录: 前端设计 | 标签: | 5290次阅读