jquery抓取网页内容(一下如何实现自动提取内容主题生成目录并实现点击跳转)

　　jquery抓取网页内容(一下如何实现自动提取内容主题生成目录并实现点击跳转)

　　当页面内容过多时，必须要有各级标题，内容太长，用户访问很不方便。如果可以添加目录，点击跳转，用户体验会大大提升。

　　从前端来看，解决这个问题其实很简单，我们只需要创建一些节点，或者锚文本，然后将链接指向那个地方。因此，我们可以在后台创建一个目录，并分配相应的节点或锚文本。但这不好：工作量太大，非常不方便。所以我想知道有没有办法自动提取内容中的主题作为目录使用，并实现它？答案是肯定的，下面我们来看看如何使用jquery自动提取内容和主题生成目录点击跳转：

　　首先，在后台编辑内容时，需要有对应的主题可以提取

　　此示例基于 h 标题。一般h1是文章的标题，所以内容部分应该是h2、h3、h4。后台编辑内容很容易，而且从优化的角度来说，应该是这样做的，所以没有多余的工作要做。以Kindeditor为例，首先选择要设置为标题的内容，设置为标题，如下图所示：

　　然后，在对应的前端页面嵌入如下js语句

　　target = $("#article .fl");//需要提取目录的内容所在包裹器，如果要进行相对定位，建议选择上一级dom

$(document).ready(function() {

GenerateContents();//提起目录并实现点击跳转

});

function GenerateContents() {

var num = 0;//第x个目录 用于jquery跳转实现

var content = "目录";//创建的目录的dom结构

content += '';

$("h2").each(function(){//遍历内容中的所有h2标签 作为一级目录

content += ""+GenerateA(num,$(this).text());

$(this).before(GenerateLabel(num));

num++;

var second = $(this).nextUntil("h2","h3");

if (second) {

content += "";

second.each(function(){//变量内容中的所有h3标签 作为二级目录

content += ""+GenerateA(num,$(this).text())+"";

$(this).before(GenerateLabel(num));

num++;

});

content += "";

};

content += "";

});

content += "";

target.append(content);//插入目录到页面中

}

function GenerateLabel(num){

var a = "<a name = 'label" + num + "'></a>";

return a;

}

function GenerateA(num ,text){

var ss = "<a data-i='" + num +"'>" + text + "</a>";

return ss;

}

//实现点击跳转

$('#quick a').live('click',function(){

var _obj=$(this).attr('data-i');

_obj=$('a[name=label'+_obj+']');

var _top=_obj.position().top;

_top-=80;

$('html,body').animate({scrollTop:_top},500);

})

　　此时，提取内容主题生成目录，实现点击跳转。当然，你也应该结合css进行定位，比如将目录设置为固定（fixed）定位。

　　#quick{ position: fixed; left: 20px; top:140px; text-align: right;}

#quick{ font-size: 18px; color: #999;}

#quick a{ font-size: 14px; padding: 10px 0; font-weight: bold; cursor: pointer; color: #333;}

#quick a:hover{ color: #fd5050;}

#quick li li a{ font-weight: normal; color: #666;}

　　效果图如下：

　　© 致远2020-02-25，原创内容，转载请注明错误：jquery自动提取内容和主题生成目录，实现点击跳转