自定义导航收藏网站设计及js抓取页面的文字链接信息 javascript

问题背景
浏览器的收藏夹功能不错，但是感觉类似hao123这样的导航网站也挺好，更直观。但是发现其并不能自定义，或者说不能很好的自定义。
所以想实现一个简单本地化页面，下面的例子如此，最开始考虑能不能在线维护，考虑到没有后台服务，所以放弃，现在只能在电脑端维护json文件。有考虑过谷歌浏览器插件，后放弃。
网页效果
文章图片

文章图片

部分代码特点关于某些导航网站爬取符合规则的数据爬取的url 是 https://www.lervor.com/nav/# 这个导航网站
（主要是用的js正则表达式匹配字符去获取想要的链接和文字）
下面的js复制到浏览器console控制台，可以返回结果。

var title=""; //标题 var title_detail=""; //详细标题 var img_src=""; //图片地址 var src=""; //网页地址 var jsonX=''; for(i=0; i<=document.getElementsByClassName("col-sm-3").length; i++){ //console.log(document.getElementsByClassName("col-sm-3")[i]); //输出该页面的所有链接。 if(document.getElementsByClassName("col-sm-3")[i]){ var h=document.getElementsByClassName("col-sm-3")[i].getElementsByClassName("xe-widget xe-conversations box2 label-info")[0].outerHTML; title=/(?<=strong>).*?(?=<)/.exec(h)[0]; title_detail=/(?<=overflowClip_2">).*?(?=<)/.exec(h)[0]; //img_src=https://www.it610.com/article/document.getElementsByClassName("col-sm-3")[i].getElementsByTagName("img")[0].src; //img_src=https://www.it610.com/(?<=files/).*?(?=")/.exec(h)[0]; img_src=https://www.it610.com/(?<=src=").*?(?=")/.exec(h)[0]; src=https://www.it610.com/(?<=data-original-title=").*?(?=")/.exec(h)[0]; t='{sName:\''+title+'\',sUrl:\''+src+'\',sImg:\''+img_src+'\',sInfo:\''+title_detail+'\'},\n'; console.log(">"+t); jsonX=jsonX+t; } } console.log(">>>>>>>>>>.."+jsonX);

【自定义导航收藏网站设计及js抓取页面的文字链接信息】